声明冲突:
同一个元素,属性名相同,属性值不同,就产生了“声明冲突”,浏览器会自动触发层叠机制
层叠是一种机制,用于解决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. 比较源次序
后写的覆盖前面的
完。
更多资料请微信搜索公众号「 夜来妖风起」第一时间阅读。