所有前端体系的集合链接：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属性才会生效
这对于实现一些列表样式很有用
网友评论