选择器的组合
选择器列表是一个由逗号分隔的复杂选择器序列;复杂选择器则是用“空格”、“~”、“+”、“>”、“||”连接的复合选择器;复合选择器则是连写的简单选择器。
选择器的连接方式可以理解为四则运算一样有优先级。
- 第一优先级:无连接符号,表示“且”
- 第二优先级:“空格”、“~”、“+”、“>”、“||”
- 第三优先级 :“,”表示“或”
复杂选择器规定了五种连接符号。 - “空格”:后代,表示选中所有符合条件的后代节点, 例如“ .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规则。浏览器提供了“!important”关键字优先级高于行内属性,不推荐使用。
不同属性选择器的优先级相同。例如下面一段代码中三个属性选择器的优先级是相同。
<input type="text"/>
[type]{
}
[type="text"]{
}
[type^="t"]{
}
同一优先级的选择器遵循后面的覆盖前面的原则。