前端学习笔记（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”关键字优先级高于行内属性，不推荐使用。不同属性选择器的优先级相同。例如下面一段代码中三个属性选择器的优先级是相同。 <input type="text"/> [type]{ } [type="text"]{ } [type^="t"]{ } 同一优先级的选择器遵循后面的覆盖前面的原则。
