CSS 选择器

选择器权重

关系选择符（a+b、a>b、a b、a~b）与通配符一样，都是没有权重的。

如果一个样式属性后面加上 !important 规则，此声明将覆盖任何其他声明。也可以认为它的优先级是最高的。

例如下面的代码：

<style>
  *{
    color: red;
  }
  p{
    color: green;
  }
</style>
<p>OK!!!
  <span>span span</span>
</p>

问 span 元素的字体颜色是什么颜色？

答案是 red，这说明通配符的权重要比继承大。如果去掉通配符，那么 span 的字体颜色将继承 p 元素的字体颜色。

A. .bfc+div
B. .bfc div
C. .bfc>div
D. .bfc~div

答案是 A

第二个选项表示后代选择器，儿子元素、孙子元素都可以选择到；
第三个选项表示子代选择器，只有 .bfc 的子元素可以选择到；
第四个选项表示通用的兄弟选择器，不管相不相邻都可以选择到；

A. [attr^="val"]
B. [attr~="val"]
C. [attr|="val"]
D. [attr$="val"]

答案 C

属性选择器通过已经存在的属性名或属性值匹配元素。例如：

input[type="text"]{
  color: red;
}

[attr^="val"] 表示属性值以 val 开头，题目是说以 val- 开头，所以不正确；
[attr~="val"] 表示属性值用空格分割为多个值，其中至少有一个值是 val，例如 class 属性就可以有多个值；
[attr|="val"] 表示带有以 attr 命名的属性的元素，属性值为 val 或以 val- 为前缀。选取有自定义属性的元素时可以使用该选择器（data-*）。
[attr$="val"] 表示属性值以字符串 val 结尾；
[attr*="val"] 表示选取 attr 属性值中包含 val 字符串的元素。

除此之外，还有一种格式：

[attr operator value i]

它表示在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I，大小写不敏感），可以在匹配属性值时忽略大小写。如：

/* 包含 "insensitive" 的链接,不区分大小写 */
a[href*="insensitive" i] {
  color: cyan;
}

/* 包含 "cAsE" 的链接，区分大小写 */ 
a[href*="cAsE" s] { 
  color: pink; 
}