为您解读CSS优先级Word文件下载.docx
《为您解读CSS优先级Word文件下载.docx》由会员分享，可在线阅读，更多相关《为您解读CSS优先级Word文件下载.docx（9页珍藏版）》请在冰豆网上搜索。
既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是本次所需要讲的重点。
样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：
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
red;
10
p.bright
yellow;
11
em.dark
brown;
22
#id316
yellow}
100
单从上面这个表来看，貌似不大好理解，下面再给出一张表：
h1
1+1=2
.apple{color:
p.bright{color:
1+10=11
p.brightem.dark{color:
1+10+1+10=22
#id316{color:
通过上面，就可以很简单的看出，HTML标记的权重是1,CLASS的权重是10,ID的权重是100，继承的权重为0（后面会讲到）。
按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。
优先级问题其实就是一个冲突解决的问题，当同一个元素（内容）被CSS选择符选中时，就要按照优先级取舍不同的CSS规则，这其中涉及到的问题其实很多。
说到这里，我们不得不说一下CSS的继承性。
四、CSS的继承性
4.1继承的表现
继承是CSS的一个主要特征，它是依赖于祖先-后代的关系的。
继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。
例如一个BODY定义了的颜色值也会应用到段落的文本中。
样式定义：
body{color:
#f00;
}
举例代码：
<
p>
CSS<
strong>
继承性<
/strong>
的测试<
/p>
举例效果：
这段代码的应用结果是：
“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了<
标签，所以是粗体。
很显然，这段文字都继承了由body{color:
}样式定义的颜色。
这也就是为什么说继承性是CSS的一部分。
然而CSS继承性的权重是非常低的，是比普通元素的权重还要低的0。
我们仍以上面的举例代码为例：
在样式定义中添加一条：
strong{color:
#000;
发现只需要给<
加个颜色值就能覆盖掉它继承自<
body>
的样式颜色。
由此可见：
任何显示申明的规则都可以覆盖其继承样式。
4.2继承的局限性
继承是CSS重要的一部分，我们甚至不用去考虑它为什么能够这样，但CSS继承也是有限制的。
有一些属性不能被继承，如：
border,margin,padding,background等。
div{border:
1pxsolid#000;
div>
我是<
em>
border<
/em>
我是不能被继承滴<
/div>
预期效果：
实际效果：
从上面的效果中，我们可以看出，border是不能被继承的，还有一些其它的属性也是如此，这里就不一一列举。
五、附加说明
1.文内的样式优先级为1,0,0,0，所以始终高于外部定义。
这里文内样式指形如<
divstyle="
color:
red"
>
blah<
的样式，而外部定义指经由<
link>
或<
style&
gt;
卷标定义的规则。
2.有!
important声明的规则高于一切。
3.如果!
important声明冲突，则比较优先权。
4.如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
5.由继承而得到的样式没有specificity的计算，它低于一切其它规则（比如全局选择符*定义的规则）。
6.关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前（如不是，则浏览器应该忽略之），所以按照后来居上原则，一般优先权冲突时是占下风的。
还需要说一下，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其它规则定义之前的，这可能会引发一些误会。
优先权问题看起来简单，但背后还是有非常复杂的机制，在实际应用中需要多多留意。
六、练习
看完上面的文字后，来做几道非常简单的题目。
（自己答完前，请不要先看各题给出的链接地址哦）
1.如何让使用两个使用相同样式名的元素具有不同的效果：
运行代码框
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDXHTML1.0Strict//EN"
"
http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
htmlxmlns="
//www.w3.org/1999/xhtml"
head>
metahttp-equiv="
Content-Type"
content="
text/html;
charset=gb2312"
/>
Content-Language"
gb2312"
title>
test<
/title>
metaname="
Author"
doyoe（飘零雾雨）,edzmaster@"
styletype="
text/css"
.test{
width:
200px;
border:
font:
12px/200%"
宋体"
;
color:
background:
#ddd;
p.test{
#fff;
#070;
/style>
/head>
divclass="
test"
测试测试测试<
pclass="
/body>
/html>
[Ctrl+A全部选择提示：
你可先修改部分代码，再按运行]
固定效果：
固定代码：
传说中的测试<
2.如何让<
h3>
始终为黑色，而<
在不被<
包含的情况为红色：
h3,h3em{
em{
讨论<
优先级<
/h3>
3.如何写一个外部样式使得
h3style="
"
覆盖我<
的颜色为红色：
h3{
#f00!
important;
覆盖我<
4.如何让同时具有.a,.b样式的元素只表现.a的颜色样式：
.b{
.a{
ab"
传说中滴测试<
关于样式优先级，今天就先聊到这。
升级会员 