前言 Q:如果多个规则匹配同一个元素,而且部分声明之间有冲突,那么我们如何知道哪个规则胜出呢? A:用户代理会计算每个规则中选择符的特指度,然后将其依附到规则中的每个声明上。如果两个或多个属性声明有冲突,特指度最高的声明胜出。而为了计算特指度,
前言
Q:如果多个规则匹配同一个元素,而且部分声明之间有冲突,那么我们如何知道哪个规则胜出呢? A:用户代理会计算每个规则中选择符的特指度,然后将其依附到规则中的每个声明上。如果两个或多个属性声明有冲突,特指度最高的声明胜出。而为了计算特指度,用户代理必须把规则“打散”成单独的规则 例如:h1 { color: silver; background: black; } 将变成以下形式。二者的特指度都是 0,0,0,1 ,赋予每个声明的值就是它
3.1 特指度 特指度(或权值):表示一个css选择器表达式的重要程度 选择符的特指度由选择符本身的组成部分决定。一个特指度值由四部分构成,例如:0,0,0,0
注意事项:
案例:因为通用选择符应用于全部元素,而且特指度为零,所以它声明的颜色gray击败继承的颜色black(由于继承的值没有特指度),因此,em元素渲染为灰色,而不是黑色
3.3 层叠
CSS层叠规则:
如果两个规则应用到同一个元素上,而其中一个以 !important 标记,那么有此标记的规则胜出
读者提供的样式中以 !important 标记的声明 创作人员编写的样式中以 !important 标记的声明 创作人员编写的常规声明读者 提供的常规声明 用户代理的默认声明
重要声明:!important Class:类选择符、属性选择符、伪类选择符 Element:元素选择符、伪元素选择符 本文来自博客园,作者:不二橘子酱,原文链接:https://www.cnblogs.com/feeder/p/14979688.html |
2021-04-14
2021-04-29
2018-01-07
2022-06-10
2021-09-30