Q:如果多个规则匹配同一个元素,而且部分声明之间有冲突,那么我们如何知道哪个规则胜出呢?
A:用户代理会计算每个规则中选择符的特指度,然后将其依附到规则中的每个声明上。如果两个或多个属性声明有冲突,特指度最高的声明胜出。而为了计算特指度,用户代理必须把规则“打散”成单独的规则
例如:h1 { color: silver; background: black; }
将变成以下形式。二者的特指度都是 0,0,0,1
,赋予每个声明的值就是它
h1 { color: silver; } h1 { background: black; }
特指度(或权值):表示一个css选择器表达式的重要程度
选择符的特指度由选择符本身的组成部分决定。一个特指度值由四部分构成,例如:0,0,0,0
重要声明[1] | 行内样式 | ID选择符 | Class[2] | Element[3] | 通用选择符 | |
---|---|---|---|---|---|---|
特指度值 | 优先级最高 | 1,0,0,0 | 0,1,0,0 | 0,0,1,0 | 0,0,0,1 | 0,0,0,0 |
重要声明注意:
所有带 !important 的声明会放在一起,而特指度冲突就在这个范围内解决
非重要的声明作为一个整体,其中的冲突使用特指度解决
当重要声明和非重要声明冲突时,重要声明始终胜出
特指度写法注意:
继承:是指把一个元素的某些属性值传给其后代的机制(某些样式不仅应用到所指元素上,还应用到元素的后代上)
注意事项:
案例:因为通用选择符应用于全部元素,而且特指度为零,所以它声明的颜色gray击败继承的颜色black(由于继承的值没有特指度),因此,em元素渲染为灰色,而不是黑色
* { color: gray; } h1#page-title { color: black; } <h1 id="page-title"> Meerkat <em>Central</em> </h1> <p>Welcome to the best place on the web for meerkat information!</p>
层叠:是一种样式在文档层次中逐层叠加的过程,目的是让浏览器面对某个标签特定属性值的多个来源,确定最终使用哪个值
CSS层叠规则:
!important
标记的规则比没有这一标记的权重高如果两个规则应用到同一个元素上,而其中一个以 !important
标记,那么有此标记的规则胜出
读者提供的样式中以 !important
标记的声明
创作人员编写的样式中以 !important
标记的声明
创作人员编写的常规声明读者
提供的常规声明
用户代理的默认声明
重要声明:!important ↩︎
Class:类选择符、属性选择符、伪类选择符 ↩︎
Element:元素选择符、伪元素选择符 ↩︎
本文来自博客园,作者:不二橘子酱,转载请注明原文链接:https://www.cnblogs.com/feeder/p/14979688.html
jsjswy