为您解读CSS优先级Word文件下载.docx

1、既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点。样式表中的特殊性描述了不同规则的相对权重，它的基本规则是： 1. 统计选择符中的ID属性个数。2. 统计选择符中的CLASS属性个数。3. 统计选择符中的HTML标记名个数。最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数（css2.1是用4位数表示）。（ 注意，你需要把数字转换成一个以三个数字结尾的更大的数）。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。例如：1. 每个ID选择符（#someid），加 0,1,0,0。2. 每个class选择符（.somecl

2、ass）、每个属性选择符（形如attr=value等）、每个伪类（形如:hover等）加0,0,1,0。3. 每个元素或伪元素（:firstchild）等，加0,0,0,1。4. 其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。三、特性分类的选择符列表以下是一个按特性分类的选择符的列表：选择符特性值h1 color:blue;1p emcolor:purple;2.applered;10p.brightyellow;11em.darkbrown;22#id316yellow100单从上面这个表来看，貌似不大好理解，下面再给出一张表：h

3、11+1=2.apple color:p.bright color:1+10=11p.bright em.dark color:1+10+1+10=22#id316 color:通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0（后面会讲到）。按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。优先级问题其实就是一个冲突解决的问题，当同一个元素（内容）被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。说到这里，我们不得不说一下CSS的继承性。四、CSS的继承

4、性4.1 继承的表现继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。样式定义：body color:#f00; 举例代码：CSS继承性的测试举例效果：这段代码的应用结果是：“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了标签，所以是粗体。很显然，这段文字都继承了由body color:样式定义的颜色。这也就是为什么说继承性是CSS的一部分。然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。我们仍以上面的举例代码为例：在样式

5、定义中添加一条：strong color:#000;发现只需要给加个颜色值就能覆盖掉它继承自的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。4.2 继承的局限性继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。有一些属性不能被继承，如：border, margin, padding, background等。div border:1px solid #000;div我是border我是不能被继承滴预期效果：实际效果：从上面的效果中，我们可以看出，border是不能被继承的，还有一些其它的属性也是如此，这里就不一一列举。五、附加说明1. 文内的

6、样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如blah的样式，而外部定义指经由或meta http-equiv=Content-Type content=text/html; charset=gb2312 /Content-Languagegb2312titletestmeta name=Authordoyoe（飘零雾雨）, edzmasterstyle type=text/css.test width:200px; border: font:12px/200% 宋体; color: background:#ddd;p.test #fff;#070;/style/headdiv class=test测试测试测试/htmlCtrl+A 全部选择 提示：你可先修改部分代码，再按运行固定效果：固定代码：传说中的测试2. 如何让始终为黑色，而在不被包含的情况为红色：h3,h3 em em 讨论优先级3. 如何写一个外部样式使得h3 style= 覆盖我的颜色为红色：h3 #f00!important;覆盖我4. 如何让同时具有.a,.b样式的元素只表现.a的颜色样式：.b .a a b传说中滴测试关于样式优先级，今天就先聊到这。