CSS有哪些选择器，如何计算优先级？（二）

声明冲突：

同一个元素，属性名相同，属性值不同，就产生了“声明冲突”，浏览器会自动触发层叠机制

层叠是一种机制，用于解决css声明冲突，是自动触发完成的。
 

层叠的过程：

一般由于我们在开发中不会只是简单的样式，而是很多的样式在一起，那么就需要一个规则去辨别最后渲染的样式；

CSS的层叠特性就是让样式层叠在一起，通过特殊性、重要性、来源及继承机制来排列层叠样式的顺序及选出胜出者。

 
在不考虑来源的情况下，！important最高。
! important写在css申明的分号里面

一个声明的优先级，与它的来源（开发者样式表、浏览器默认样式表、用户样式表）和重要性（若属性值后面加上！important，则表示一条重要的声明，否则表示普通声明）有关

 
1. 比较优先级

优先级从低到高：（1）浏览器默认样式表中的声明；
                             （2）用户样式表中的普通声明；
                             （3）开发者样式表中的普通声明；
                             （4）开发者样式表中的重要声明；
                             （5）用户样式表的重要声明

注：user agent stylesheet 使用浏览器默认样式
在检查器中看到删除线，表示有声明冲突并已执行过层叠机制
 

2. 比较特殊性（特殊值、特指度）

一个声明的特殊性，取决于规则适用范围的大小： 规则适用范围越大，特殊性越低，适用范围越小，特殊性越高
行内样式>ID选择器>类选择器>元素选择器>通配符选择器（特殊性为0）

在比较特殊性是，每一个冲突声明会生成4个数字（a、b、c、d）；a越大特殊性越高，若a相同，比较b，以此类推
a：若声明是行内样式，则为1，否则为0
b：规则中ID选择器的个数
c：规则中类选择器、伪类选择器和属性选择器的个数
d：规则中元素选择器、伪元素选择器的个数

计算选择器中ID选择器的数量（= A）
计算选择器中的类选择器，属性选择器和伪类的数量（= B）
计算类型选择器和选择器中的伪元素的数量（=C）
忽略通用选择器
 
最终的特异性用 (A,B,C) 表示
谁的特异性大，就会应用谁的样式，如果特异性相同，则后面的样式会覆盖前面的。

当比较并集（组合）选择器时，要分开计算

 
3. 比较源次序

   后写的覆盖前面的

 
 
 

完。
更多资料请微信搜索公众号「 夜来妖风起」第一时间阅读。