分享CSS优先级的详细分析-css教程-PHP中文网

分享CSS优先级的详细分析

高洛峰

发布： 2017-03-10 11:24:51

原创

1752人浏览过

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

首先，我们对CSS作一个简单的说明：CSS是层叠样式表（Cascading Style Sheets）的简称。

它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说，应该很少没有听说过CSS了，因为在讲css优先级之前，我们得要了解什么是css，css是用来做什么的。

首先，我们对CSS作一个简单的说明：CSS是层叠样式表（Cascading Style Sheets）的简称。它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说，应该很少没有听说过CSS了，因为在制作网页过程中我们经常需要用到。

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

立即学习“前端免费学习笔记（深入）”；

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

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

一、什么是CSS优先级？

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

二、CSS优先级规则

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

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

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

最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数(css2.1是用4位数表示)。( 注意，你需要把数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

例如：

每个ID选择符(#someid)，加 0,1,0,0。
每个class选择符(.someclass)、每个属性选择符(形如[attr=value]等)、每个伪类(形如:hover等)加0,0,1,0。
每个元素或伪元素(:firstchild)等，加0,0,0,1。
其它选择符包括全局选择符*，加0,0,0,0。相当于没加，不过这也是一种specificity，后面会解释。

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

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

选择符	特性值
h1 {color:blue;}	1
p em {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
p em {color:purple;}	1+1=2
.apple {color:red;}	10
p.bright {color:yellow;}	1+10=11
p.bright em.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优先级的详细分析

这段代码的应用结果是：“CSS继承性的测试”这段话是红颜色的，“继承性”几个字由于应用了标签，所以是粗体。很显然，这段文字都继承了由body {color:#f00;}样式定义的颜色。这也就是为什么说继承性是CSS的一部分。

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

我们仍以上面的举例代码为例：在样式定义中添加一条：

strong {color:#000;}

举例效果：

发现只需要给加个颜色值就能覆盖掉它继承自的样式颜色。由此可见：任何显示申明的规则都可以覆盖其继承样式。

4.2 继承的局限性

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

有一些属性不能被继承，如：border, margin, padding, background等。

样式定义：

p {border:1px solid #000;}

举例代码：

我是border我是不能被继承滴

预期效果：

分享CSS优先级的详细分析

实际效果：

分享CSS优先级的详细分析

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

五、附加说明

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

blah

的样式，而外部定义指经由或有!important声明的规则高于一切。
如果!important声明冲突，则比较优先权。
如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。
关于经由@import加载的外部样式，由于@import必须出现在所有其它规则定义之前(如不是，则浏览器应该忽略之)，所以按照后来居上原则，一般优先权冲突时是占下风的。
还需要说一下，IE是可以识别位置错误的@import的，但无论@import在什么地方，它都认为是位于所有其它规则定义之前的，这可能会引发一些误会。

优先权问题看起来简单，但背后还是有非常复杂的机制，在实际应用中需要多多留意。

六、练习

看完上面的文字后，来做几道非常简单的题目。（自己答完前，请不要先看各题给出的链接地址哦）

1. 如何让使用两个使用相同样式名的元素具有不同的效果：

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<title>test</title> 
<meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" /> 
<style type="text/css"> 
.test { 
width:200px; 
border:1px solid #000; 
font:12px/200% "宋体"; 
color:#f00; 
background:#ddd; 
} 
p.test { 
color:#fff; 
background:#070; 
} 
</style> 
</head> 
<body> 
<div class="test">测试测试测试</div> 
<p class="test">测试测试测试</p> 
</body> 
</html>

登录后复制

提示：您可以先修改部分代码再运行

固定效果：

分享CSS优先级的详细分析

固定代码：

2. 如何让

始终为黑色，而在不被
包含的情况为红色：

提示：您可以先修改部分代码再运行

传说中的测试

传说中的测试

固定效果：

固定代码：

讨论CSS优先级

讨论CSS优先级

3. 如何写一个外部样式使得
覆盖我

的颜色为红色：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="gb2312" /> <title>test</title> <meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" /> <style type="text/css"> h3 { color:#f00!important; } </style> </head> <body> <h3 style="color:#000;">覆盖我</h3> </body> </html>
登录后复制
提示：您可以先修改部分代码再运行

4. 如何让同时具有.a,.b样式的元素只表现.a的颜色样式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-Language" content="gb2312" /> <title>test</title> <meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" /> <style type="text/css"> .b { color:#000; } .a { color:#f00; } </style> </head> <body> <p class="a b">传说中滴测试</p> </body> </html>
登录后复制
提示：您可以先修改部分代码再运行

固定代码：

传说中滴测试

关于样式优先级，今天就先聊到这。

以上就是分享CSS优先级的详细分析的详细内容，更多请关注php中文网其它相关文章！

分享CSS优先级的详细分析

包含的情况为红色：

讨论CSS优先级

覆盖我