CSS教程：认识层叠规则互相作用

CSS教程：认识层叠规则互相作用 2022-11-09 800

提示：重要性（“!important”声明），请参见本书[4.6.4 重要性]一节。

.warning { color: red; } p { color: green; } 层叠和继承的规则如何实现？

此代码在浏览器内显示如图4-31所示。

图4-31 选择器的特殊性这是由于类选择器“warning”和类型选择器“p”的“特殊性”不同。特殊性（specificity）描述了不同选择器的相对权重（weight）。一个选择器的特殊性是这样计算的： ·如果CSS属性是通过(X)HTML元素的style属性定义的，则记为a=1，否则记为0；由于style属性是写在(X)HTML标签内的，因此不存在选择器，所以：a=1, b=0, c=0, 且 d=0； ·计算选择器中ID选择器的数量，计为b； ·计算选择器中类选择器、属性选择器和伪类的数量，计为c； ·计算选择器中类型选择器的数量，计为d； ·忽略伪元素。将这4个数字（a, b, c, d）相连（数字进制要以大的为准），得到特殊性。例如：

{ …… } 特殊性 = 0, 0, 0, 0 li { …… } 特殊性 = 0, 0, 0, 1 ul li { …… } 特殊性 = 0, 0, 0, 2 ul ol+li { …… } 特殊性 = 0, 0, 0, 3 h1 + [rel="up"] { …… } 特殊性 = 0, 0, 1, 1 ul ol li.warning { …… } 特殊性 = 0, 0, 1, 3 li.menu.level { …… } 特殊性 = 0, 0, 2, 1 #x34y { …… } 特殊性 = 0, 1, 0, 0 特殊性 = 1, 0, 0, 0

特殊性高的规则会取代特殊性低的规则，无论其书写的先后顺序如何，例如：

h1 {color red;} 0,0,0,1 body h1 {color green;} 0,0,0,2 （胜出）

或者：

h2.grape {color purple;} 0,0,1,1 (胜出) h2 {color silver;} 0,0,0,1

4.6.3 继承和特殊性在特殊性的框架下，继承的特殊性为“0”。也就是说，任何显式的规则声明都会覆盖掉继承的样式，例如有如下代码：

em { color: blue; } p.list { color: gray; } 继承的特殊性为“0”。

虽然“p.list”的特殊性为“0, 0, 1, 1”，但是，对“em”的color声明还是会覆盖掉从“p.list”继承的color样式，因此在浏览器内显示如图4-32所示。

图4-32 继承与特殊型因此，如果需要让p内的em能呈现和p一样的颜色，则需要如下定义：

p.list, p.list em { color gray; }

4.6.4 重要性虽然层叠和特殊性决定了CSS规则的最后应用效果，但是，也可以通过声明某个规则的“重要性”来提高此规则的权重，例如图4-33所示。

图4-33 重要性的表现虽然ID选择器的特殊性高于类型选择器，但是由于类型选择器（div）属性值后面添加了“!important”重要性声明，因此“color : red”这条声明的特殊性最高。 “!important”重要性声明的权重甚至高于内联式样式，例如有如下代码，其在浏览器内显示如图4-34所示。

div { color: red !important; } <div style="color: blue;">设定了style的div</div>

p { background: yellow; text-align: left; } ，CSS：text-align: left;

图4-35 重要性的权重高于内嵌式样式由4-35读者可以看到，虽然的align属性定义为“right”，即右对齐，但是由于CSS中定义了“text-align: left;”，因此文字还是左对齐显示。但是，如果是下面的代码：

.test { color: green; } p内的示例文字。

则内的文字依然是蓝色（blue），因为对于，的color属于继承，因此标签内的属性高于继承值，但是如果增加CSS规则：

font { color: red; }

则内的文字会变为红色（red），即“color="blue"”被CSS的“color: red; ”覆盖。

免费搭建微信查券返利机器人来轻松赚佣金