为您解读CSS优先级.docx

为您解读CSS优先级.docx

《为您解读CSS优先级.docx》由会员分享，可在线阅读，更多相关《为您解读CSS优先级.docx（9页珍藏版）》请在冰豆网上搜索。

为您解读CSS优先级

为您解读CSS优先级

作者：

dh20156　时间：

2009-06-18　文档类型：

转载　来自：

W3C标准WEB前端DHTML精英俱乐部

第1页为您解读CSS优先级[1]

第2页为您解读CSS优先级[2]

第3页为您解读CSS优先级[3]

第4页为您解读CSS优先级[4]

在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。

首先，我们对CSS作一个简单的说明：

CSS是层叠样式表（CascadingStyleSheets）的简称。

它的规范代表了互联网历史上一个独特的发展阶段。

现在对于从事网页制作的朋友来说，应该很少没有听说过CSS了，因为在制作网页过程中我们经常需要用到。

其次：

我们能通过CSS为文档设置丰富且易于修改的外观，以减轻网页制作者的工作负担，从而减轻制作及后期维护的代价。

其实现在还来讲CSS是什么，CSS有什么作用完全是多余的，相信从事网页制作的朋友都已经或多或少的接触过了。

言归正传，我们开始进入今天的话题：

一、什么是CSS优先级？

所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

二、CSS优先级规则

既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点。

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

1.统计选择符中的ID属性个数。

2.统计选择符中的CLASS属性个数。

3.统计选择符中的HTML标记名个数。

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数（css2.1是用4位数表示）。

（注意，你需要把数字转换成一个以三个数字结尾的更大的数）。

相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

例如：

1.每个ID选择符（#someid），加0,1,0,0。

2.每个class选择符（.someclass）、每个属性选择符（形如[attr=value]等）、每个伪类（形如:

hover等）加0,0,1,0。

3.每个元素或伪元素（:

firstchild）等，加0,0,0,1。

4.其它选择符包括全局选择符*，加0,0,0,0。

相当于没加，不过这也是一种specificity，后面会解释。

三、特性分类的选择符列表

以下是一个按特性分类的选择符的列表：

选择符

特性值

h1{color:

blue;}

1

pem {color:

purple;}

2

.apple {color:

red;}

10

p.bright {color:

yellow;}

11

p.bright em.dark {color:

brown;}

22

#id316 {color:

yellow}

100

单从上面这个表来看，貌似不大好理解，下面再给出一张表：

选择符

特性值

h1 {color:

blue;}

1

pem {color:

purple;}

1+1=2

.apple{color:

red;}

10

p.bright{color:

yellow;}

1+10=11

p.brightem.dark{color:

brown;}

1+10+1+10=22

#id316{color:

yellow}

100

通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0（后面会讲到）。

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

优先级问题其实就是一个冲突解决的问题，当同一个元素（内容）被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。

说到这里，我们不得不说一下CSS的继承性。

四、CSS的继承性

4.1继承的表现

继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。

继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。

例如一个BODY定义了的颜色值也会应用到段落的文本中。

样式定义：

body{color:

#f00;}

举例代码：

CSS继承性的测试

举例效果：

这段代码的应用结果是：

“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了标签，所以是粗体。

很显然，这段文字都继承了由body{color:

#f00;}样式定义的颜色。

这也就是为什么说继承性是CSS的一部分。

然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。

我们仍以上面的举例代码为例：

在样式定义中添加一条：

strong{color:

#000;}

举例效果：

发现只需要给加个颜色值就能覆盖掉它继承自的样式颜色。

由此可见：

任何显示申明的规则都可以覆盖其继承样式。

4.2继承的局限性

继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。

有一些属性不能被继承，如：

border,margin,padding,background等。

样式定义：

div{border:

1pxsolid#000;}

举例代码：

预期效果：

实际效果：

从上面的效果中，我们可以看出，border是不能被继承的，还有一些其它的属性也是如此，这里就不一一列举。

五、附加说明

1.文内的样式优先级为1,0,0,0，所以始终高于外部定义。

这里文内样式指形如

red">blah