选择器声明优先级
注:本笔记由“尚硅谷”提供的笔记整理,非笔者原创
一,选择器的特殊性
选择器的特殊性由选择器本身的组件确定,特殊性值表述为4个部分 0,0,0,0
一个选择器的具体特殊性如下确定:
1.对于选择器中给定的ID属性值,加 0,1,0,0
2.对于选择器中给定的各个类属性,属性选择,或伪类,加 0,0,1,0
3.对于选择器中的给定的各个元素和伪元素,加0,0,0,1
4.通配符选择器的特殊性为0,0,0,0
5.结合符对选择器特殊性没有一点贡献
6.内联声明的特殊性都是1,0,0,0
7.继承没有特殊性
特殊性 1,0,0,0 大于所有以0开头的特殊性(不进位)
选择器的特殊性最终都会授予给其对应的声明
如果多个规则与同一个元素匹配,而且有些声明互相冲突时,特殊性越大的越占优势
二,声明优先级
1,重要声明优先级
有时某个声明比较重要,超过了所有其他声明,css2.1就称之为重要声明,并允许在这些声明的结束分号之前插入 !important 来标志必须要准确的放置 !important 否则声明无效。
!important 是要放在声明之后分号之前
重要优先级原理:
1,被标志为 !important的声明没有特殊的特殊性值,但要与非重要声明分开考虑。
2,所有的重要声明会被浏览器分为一组,重要声明的冲突在其内部解决
3,所有的非重要声明被分为一组,非重要声明的冲突会在其内部解决
4,如果一个重要声明与非重要声明冲突,胜出的总是重要声明
2,继承优先级
继承没有特殊性,即连0特殊性都没有,0特殊性要比无特殊性要强
3,来源优先级
css样式的来源大致有三种:
1,创作人员
2,读者
3,用户代理
4,权重优先级(依次递减)
1,读者的重要声明
2,创作人员的重要声明
3,创作人员的正常声明
4,读者的正常声明
5,户代理的声明
5,层叠优先级
1,找出所有相关的规则,这些规则都包含一个选择器
2,计算声明的优先级
2-1,先按来源排序
2-2,在按选择器的特殊性排序
2-3,最终按顺序