CSS样式的优先级补遗2

CSS样式的优先级补遗2

由 Ghostzhang 发表于 2006-04-21 14:26

今天看到一篇《深入了解CSS的继承性及其应用》，文章中提到了CSS的特性值

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

• 统计选择符中的ID属性个数。
• 统计选择符中的CLASS属性个数。
• 统计选择符中的HTML标记名格式。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。 以下是一个按特性分类的选择符的列表： H1 {color:blue;} /* 特性值为：1 */ P EM {color:purple;} /* 特性值为：2 */ .apple {red;} /* 特性值为：10 */ P.bright {color:yellow;} /* 特性值为：11 */ P.bright EM.dark {color:brown;} /* 特性值为：22 */ \#id316 {color:yellow} /* 特性值为：100 */ 从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。

可能不太好理解，按照上面的权重顺序，先统计ID，再统计CLASS，再统计HTML标记。即：

H1 {color:blue;} /* 特性值为：1 */
P EM {color:purple;} /*特性值为：1+ 1=2 */
.apple {red;} /* 特性值为：10 */
P.bright {color:yellow;} /*特性值为：10+ 1=11 */
P.bright EM.dark {color:brown;} /*特性值为：10+10+1+ 1=22 */
#id316 {color:yellow} /* 特性值为：100 */

可以看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100。在文章中还提到了继承的权重为0。

文章中提到一个小技巧：

如果想让H1始终为黑色，而EM文字在其他情况下红色，那么下面的样式表设置就是一个很好的方法： H1，H1 EM {color:black;} 特性值为：1，2 EM {color:red;} 特性值为：1 给定这个规则后，除在H1元素内的任何EM文字就都是红色，而H1内的EM文字仍旧为黑色，由于其选择符分组，在第一条规则中就有两条有效的规则（一条是对H1的，另一条是对H1 EM的）也就有两个特性值——每条规则一个。

这个技巧很有意思，HTML是这样的：

<H1>黑色的H1<EM>黑色的EM</EM></H1>
<EM>红色的EM</EM>

也许你会说是不是跟上面的CSS样式顺序有关系呢？可以试试改成：

EM {color:red;} /* 特性值为：1 */
H1，H1 EM {color:black;} /* 特性值为：1，2  */

效果还是一样的。这也解释了为什么“包含选择符(E1 E2)”的优先级比“类型选择符(E)”要高。

这一点对于在写样式时是很有帮助的，比如我们可以在定义列表的时候用到：

ul{color:red;}
ul li{color:green;}
div ul{color:orange;}
div ul li{color:blue;} 

这样就可以在不用增加像“id=XX”、“class=xxx”等属性的情况下对标签进行分别定义了。