css 选择器-1_class^=cont-CSDN博客

本文链接：https://blog.csdn.net/qq_32466937/article/details/104547850

这篇博客详细介绍了CSS选择器的使用，包括ID选择器、CLASS类选择器、标签选择器、通配选择器和属性选择器。ID选择器使用‘#’标识，类选择器用‘.’，标签选择器直接使用HTML标签名，通配选择器用‘*’选择所有元素，属性选择器则根据DOM属性来定位节点。

摘要由CSDN通过智能技术生成

ID 选择器

ID 选择器是用 “#” 号加 ID 名称 xxx 来表示

<div id="content">我是id选择器需要选中的元素</div>

CLASS 类选择器

类选择器是用 “.” 加上 class 名称来表示，用来选择 HTML 中 class=“xxx” 的 DOM 元素。

<div class="content">我是class选择器需要选中的元素</div>

标签选择器

标签选择器的作用是选中 HTML 中某一种类的标签，它直接使用 HTML 中的标签名作为选择器的名称。

p {
  font-size: 20px;
}

通配选择器

通配选择器使用星号来选择到页面里所有元素。由于通配选择器要把样式覆盖到所有的元素上，它的效率并不会高.

* {
  margin: 0;
  padding: 0;
}

属性选择器

属性选择器就是通过 DOM 的属性来选择该 DOM 节点。

/* 第一种形式 */
a[href] {
  color: red;
}

/* 第二种形式 */
input[type="text"] {
  color: red;
}

/* 第三种形式 */
/* [attr~=xxx]，这个选择器中间用了～=，选择属性值中包含 xxx 的元素 */
div[class~="cont"] {
  color: red;
}

/* 第四种形式 */
/* [attr|=xxx]，这个选择器是用来选择属性值为 xxx 或 xxx- 开头的元素 

<div class="article">文本</div>
<div class="article-title">文本标题</div>

*/

div[class|="article"] {
  color: red;
}

/* 第五种形式 */
/* [attr^=xxx]，这个选择器会匹配以 xxx 开头的元素
<div class="article-content">我是内容</div>
<div class="article_footer">我是页底，是下划线</div>

 */
div[class^="article"] {
  color: red;
}

/* 第六种形式 */
/* [attr$=xxx] 是用正则匹配的方式来选择属性值以 xxx 结尾的元素。

<button class="btn btn-dis"> 按钮</button>

<input class="input input-dis" value=" 输入框"/>
 */

[class$="dis"] {
  display: none;
}

/* 第七种形式 */
/*
[attr*=xxx] 这个是正则匹配的方式选择属性值中包含 xxx 字符的所有元素。
*/
[class*="abc"] {
  display: none;
}