前端笔记（8）css选择器（二）

选择器的组合

选择器列表是一个由逗号分隔的复杂选择器序列；复杂选择器则是用“空格”、“~”、“+”、“>”、“||”连接的复合选择器；复合选择器则是连写的简单选择器。
选择器的连接方式可以理解为四则运算一样有优先级。

• 第一优先级：无连接符号，表示“且”
• 第二优先级：“空格”、“~”、“+”、“>”、“||”
• 第三优先级 ：“,”表示“或”
  复杂选择器规定了五种连接符号。
• “空格”：后代，表示选中所有符合条件的后代节点， 例如“ .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”关键字优先级高于行内属性，不推荐使用。
不同属性选择器的优先级相同。例如下面一段代码中三个属性选择器的优先级是相同。

[type]{
}
[type="text"]{
}
[type^="t"]{
}

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