前端笔记(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"]{
}

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

你可能感兴趣的:(前端笔记(8)css选择器(二))