【十六】CSS选择器：伪元素是怎么回事儿？

所有前端体系的集合链接：web之路

选择器的组合

选择器列表是用逗号分隔的复杂选择器的序列；
复杂选择器则是用空格、大于号、波浪线等符号链接的复合选择器；
复合选择器则是连写的简单选择器组合；

选择器的连接方式可以理解为四则运算一样有优先级

• 第一优先级：无连接符号
• 第二优先级：空格、~、+、>、||
• 第三优先级：,

.c,.a>.b.d {
    /*......*/
}

复合选择器表示简单选择器中“且”的关系。如：".b.d"，表示选中的元素必须同时具有b和d两个class

复杂选择器是针对节点关系的选择

• 空格：后代，表示选中所有符合条件的后代节点
• >：子代，表示选中符合条件的子节点
• ~：后继，表示选中所有符合条件的后继节点，后继节点即跟当前节点具有同一父元素，并出现在它之后的节点
• +：直接后继，表示选中符合条件的直接后继节点，直接后继节点即nextSlibling
• ||：列选择器，表示选中对应列中符合条件的单元格

选择器的优先级

CSS标准用一个三元组（a，b，c）来构成一个复杂选择器的优先级

• id选择器的数目为a
• 伪类选择器和class选择器的数目为b
• 伪元素选择器和标签选择器数目为c
• * 不影响优先级

行内属性的优先级永远高于CSS规则，浏览器提供了一个“口子”，就是在选择器前加“!import”。这个用法很危险，因为它相当于一个新的优先级，而且会高于一切行内属性

同一优先级的选择器遵循“后面的覆盖前面的”原则

<div id="my" class="x y">text<div>

.x {
    background-color:lightblue;
}
.y {
    background-color:lightgreen;
}

选择器的优先级是针对单条规则的，多条规则的选择器同时命中元素，优先级不会发生叠加

<div id="my" class="x y z">text<div>

.x {
    background-color:lightblue;
}
.z {
    background-color:lightblue;
}
.y {
    background-color:lightgreen;
}

最终是浅绿色的，选择器的优先级是针对复杂选择器的优先级，选择器列表不会合并计算优先级

伪元素

伪元素不仅是一种选择规则，还是一种机制

目前兼容性良好的有：

• ::first-line
• ::first-letter
• ::before
• ::after

前两者是比较类似的伪元素，其中一个表示元素的第一行，一个表示元素的第一个字母

CSS标准规定了first-line必须出现在最内层的块级元素之内

CSS标准要求前两者实现有限的几个CSS属性，都是文本相关，如图：

image.png

后两者不是把已有的内容套上一个元素，而是真正的无中生有，造出一个元素。

::before表示在元素内容之前插入一个虚拟的元素
::after表示在元素内容之后插入
并且所在的CSS规则必须指定content属性才会生效

这对于实现一些列表样式很有用

CSS选择器：伪元素是怎么回事儿？