CSS选择器种类和优先级计算
2019-10-17 本文已影响0人
西瓜鱼仔
选择器种类
基本选择器：
- 标签选择器（用 HTML 标签申明）
- id 选择器（用 DOM 的 ID 申明）
- 类选择器（用一个样式类名申明）
基本选择器的扩展选择器：
- 后代选择器（利用空格间隔，比如 div .a{ }）
- 子选择器（ul < li）
- 群组选择器（利用逗号间隔，比如 p,div,#a{ }）
其他：
- 属性选择器（a[rel = "external"]）
- 通配符选择器（ * ）
- 伪类选择器（a: hover, li: nth - child）
优先级计算
那么问题来了，CSS 选择器的优先级是怎么样定义的？ 基本原则：
一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。
用加分制来计算，分值越大，优先级越高：
- ！important 特殊性最高
- 对于内联样式，加1000
- 对于选中器中给定的ID属性值，加100
- 对于选择器中给定的类属性值，属性选择或伪类，加10
- 对于选择器中给定的元素选择器和伪元素，加1
- 结合符和通配符选择器对特殊性没有任何贡献，加0
示例：
div .test1 .span var {} 优先级：1 + 10 +10 +1
div .test1 {} 优先级：1 + 10
span#xxx .songs li {} 优先级：1 + 100 + 10 + 1
#xxx li {} 优先级：100 + 1
再分享一个特殊的情况，看下列代码，<p>标签内的文字是什么颜色的？
<style>
.classA{ color:blue;}
.classB{ color:red;}
</style>
<body>
<p class="classB classA"> 123 </p>
</body>
答案：red。
与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在<p class="classB classA">中的先后关系无关。
这就是：优先级就近原则，样式定义最近者为准。
