选择器的特殊性
在CSS中针对某个元素的多个相同的规则,浏览器会计算其特殊性。如果一个元素有多个冲突的规则,具有最高特殊性的声明会胜出。
特殊性值的表述为4个部分,0,0,0,0
,规则如下
对于选择器中给定的各个ID属性值,加
0,1,0,0
;对于选择器中给定的各个
类属性值
,属性选择
,伪类
,加0,0,1,0
;对于选择器中给定的
各个元素
和伪元素
,加0,0,0,1
;通配符(*)的特殊性为
0,0,0,0
;结合符 和 继承 没有特殊性;
style 的重要性为
1,0,0,0
;-
!import的声明没有特殊性,但和非!import声明在一起时,总是使用含!import的声明;
注:非0的数值越靠前,特殊性越高,同一位置的非0的数值,值越大,特殊性越高
注:继承没有特殊性,甚至连0特殊性都没有,而通配符有特殊性,所以通配符的特殊性 大于 继承
注:内联样式style和!important使用同一属性时,!important 胜出
例:
h1 { color: red; } /* 0,0,0,1*/
body h1 { color: red } /* 0,0,0,2*/
h2.warning { color: red } /* 0,0,1,1 */
html > body table tr[id="total"] td ul > li { color: red; } /*0,0, 1,7 */
继承
样式不仅应用到指定的元素,还会应用到它的后台元素,即继承
。
大多数框模型属性(外边距、内边距、背景和边框等)都不能继承。
层叠
特殊性相同的规则同时应用在同一元素上时,浏览器通过层叠来解决样式冲突。
层叠是通过结合继承和特殊性做到的。
层叠规则:
找出所有相关的规则
-
按显示权重对应用到该元素的所有声明排序
权重如下:
读者的重要声明
开发者样式的重要声明
开发者样式的正常声明
读者的正常声明
-
浏览器的默认样式
注: 读者的声明是读者自己写的样式,IE可以通过
Internet 选项
->外观
->辅助功能
->用户样式表
来指定样式文件。Chrome可以使用Stylish
扩展来实现
按特殊性对应用到给定元素的所有声明排序。
按出现顺序对应用到给定元素的所有声明排序。一个声明在样式表或者文档中越往后出现,权重越大。