CSS 选择器的三种机制:选择器的组合、选择器优先级、以及伪元素
选择器的连接方式:
第一优先级
- 无连接符号
第二优先级
- “空格”
- “~”
- “+”
- “>”
- “||”
第三优先级
- “,”
.c,.a>.b.d {
/*......*/
}
等价于
.c {
/*......*/
}
.a>.b.d {
/*......*/
}
- “空格”:后代,表示选中所有符合条件的后代节点, 例如“ .a .b ”表示选中所有具有 class 为 a 的后代节点中 class 为 b 的节点。
- “>” :子代,表示选中符合条件的子节点,例如“ .a>.b ”表示:选中所有“具有 class 为 a 的子节点中,class 为 b 的节点”。
- “~” : 后继,表示选中所有符合条件的后继节点,后继节点即跟当前节点具有同一个父元素,并出现在它之后的节点,例如“ .a~.b ”表示选中所有具有 class 为 a 的后继中,class 为 b 的节点。
- “+”:直接后继,表示选中符合条件的直接后继节点,直接后继节点即 nextSlibling。例如 “.a+.b ”表示选中所有具有 class 为 a 的下一个 class 为 b 的节点。
- “||”:列选择器,表示选中对应列中符合条件的单元格。
比较常用的连接方式是“空格”和“>”
选择器的优先级
- id 选择器的数目记为 a;
- 伪类选择器和 class 选择器的数目记为 b;
- 伪元素选择器和标签选择器数目记为 c;
- “*” 不影响优先级
specificity = base * base * a + base * b + c
base 是一个“足够大”的正整数
行内属性的优先级永远高于 CSS 规则,浏览器提供了一个“口子”,就是在选择器前加上“!import”。
同一优先级的选择器遵循“后面的覆盖前面的”原则
实践中,建议你“根据 id 选单个元素”“class 和 class 的组合选成组元素”“tag 选择器确定页面风格”这样的简单原则来使用选择器,不要搞出过于复杂的选择器。
伪元素
目前兼容性达到可用的伪元素有以下几种。
::first-line:表示元素的第一行 ,必须出现在最内层的块级元素之内
::first-letter:表示元素的第一个字母
::before
::after
::before 和 ::after 伪元素是真正的无中生有,造出一个元素。
::before 表示在元素内容之前插入一个虚拟的元素,::after 则表示在元素内容之后插入。这两个伪元素所在的 CSS 规则必须指定 content 属性才会生效
<p class="special">I'm real element</p>
p.special::before {
display: block;
content: "pseudo! ";
}
::before 和 ::after 还支持 content 为 counter
<p class="special">I'm real element</p>
p.special::before {
display: block;
content: counter(chapno, upper-roman) ". ";
}
::before 和 ::after 中支持所有的 CSS 属性