css选择器总结

一，选择器列表

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

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

1.

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

2.

复杂选择器是针对节点关系的选择，它规定了五种连接符号。

“空格”：后代，表示选中所有符合条件的后代节点， 例如“ .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 的节点。

“||”：列选择器，表示选中对应列中符合条件的单元格。

我们在实际使用时，比较常用的连接方式是“空格”和“>”。

3.

逗号表示“或”的关系，实际上，可以把它理解为“两条内容一样的 CSS 规则”的一种简写。如我们开头的例子，可以理解成与下面的代码等效：

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

根据选择器列表的语法，选择器的连接方式可以理解为像四则运算一样有优先级。

第一优先级是无连接符号；第二优先级是：“空格”“~”“+”“>”“||”；第三优先级是“,”。

二，选择器的优先级

不同规则指定同一个属性为不同值时，就需要一个机制来解决冲突。这个机制，就是选择器优先级。

CSS 标准用一个三元组 (a, b, c) 来构成一个复杂选择器的优先级。

id 选择器的数目记为 a；

伪类选择器和 class 选择器的数目记为 b；

伪元素选择器和标签选择器数目记为 c；

“*” 不影响优先级。

选择器优先级实际由一个公式计算所得：

specificity = base * base * a + base * b + c

这个base足够大，使得id选择器总是最优先。

行内属性的优先级永远高于 CSS 规则。

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