搜索

首页 >web前端 >css教程 >分享CSS优先级的详细分析

分享CSS优先级的详细分析

高洛峰
高洛峰原创
2017-03-10 11:24:511636浏览

在讲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优先级规则

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

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

  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

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;}

举例代码：

e388a4556c0f65e1904146cc1a846beeCSS8e99a69fbe029cd4e2b854e244eab143继承性128dba7a3a77be0113eb0bea6ea0a5d0的测试94b3e26ee717c64999d7867364b1b4a3

举例效果：

分享CSS优先级的详细分析

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

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

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

strong {color:#000;}

举例效果：

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

4.2 继承的局限性

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

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

样式定义：

p {border:1px solid #000;}

举例代码：

e388a4556c0f65e1904146cc1a846bee我是907fae80ddef53131f3292ee4f81644bborderd1c6776b927dc33c5d9114750b586338我是不能被继承滴94b3e26ee717c64999d7867364b1b4a3

预期效果：

分享CSS优先级的详细分析

实际效果：

分享CSS优先级的详细分析

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


五、附加说明

文内的样式优先级为1,0,0,0，所以始终高于外部定义。这里文内样式指形如e17ac918b7496c7d32ee843c7561d1c7blah94b3e26ee717c64999d7867364b1b4a3的样式，而外部定义指经由2cdf5bf648cf2f33323966d7f58a7f3f或e046bdf94872c0352d9c6ddc3c27dbd8始终为黑色，而907fae80ddef53131f3292ee4f81644b在不被684271ed9684bde649abda8831d4d355包含的情况为红色：

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


1eba31feda66d1ff180a51cb4fb36425传说中的测试94b3e26ee717c64999d7867364b1b4a3
1eba31feda66d1ff180a51cb4fb36425传说中的测试94b3e26ee717c64999d7867364b1b4a3

 

固定效果：

分享CSS优先级的详细分析

固定代码：

684271ed9684bde649abda8831d4d355讨论907fae80ddef53131f3292ee4f81644bCSSd1c6776b927dc33c5d9114750b586338优先级39528cedfa926ea0c01e69ef5b2ea9b0
e388a4556c0f65e1904146cc1a846bee讨论907fae80ddef53131f3292ee4f81644bCSSd1c6776b927dc33c5d9114750b586338优先级94b3e26ee717c64999d7867364b1b4a3

3. 如何写一个外部样式使得
b2fe6fd8c8ecda9c63fd3af2e84a6b95 覆盖我39528cedfa926ea0c01e69ef5b2ea9b0
的颜色为红色：

<!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>

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

固定代码：

20f1368135096bb5b92b5fcf7af41c55传说中滴测试94b3e26ee717c64999d7867364b1b4a3

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

以上是分享CSS优先级的详细分析的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：分享css网页制作实用的9个技巧下一篇：网页布局教程：CSS网页布局属性介绍

相关文章

查看更多