CSS优先级 - 前端学习教程_ 前端_前端开发

定义CSS样式时，经常出现两个或更多样式规则应用在同一元素上，这时就会出现优先级的问题，应用的元素此时该显示哪种样式呢？接下来将对CSS优先级进行具体讲解。

为了体验CSS优先级，首先来看一个具体的例子，其CSS样式代码如下。

p{ color:red;}              /*标签样式*/
.blue{ color:green;}       /*class样式*/
#header{ color:blue;}      /*id样式*/

对应的HTML结构为：

<p id="header" class="blue">
    帮帮我，我到底显示什么颜色？
</p>

在上面的例子中，使用不同的选择器对同一个标签设置文本颜色，这时浏览器会根据选择器的优先级规则解析CSS样式。其实CSS为每一种基础选择器都分配了一个权重，我们可以通过数值为其匹配权重，那么标签选择器具有权重为1，类选择器具有权重则为10，id选择器具有权重则为100。这样id选择器#header就具有最大的优先级，因此文本显示为蓝色。

对于由多个基础选择器构成的复合选择器（并集选择器除外），其权重为这些基础选择器权重的叠加。例如下面的CSS代码：

p strong{color:black}               /*权重为:1+1*/
strong.blue{color:green;}          /*权重为:1+10*/
.father strong{color:yellow}      /*权重为:10+1*/
p.father strong{color:orange;}    /*权重为:1+10+1*/
p.father .blue{color:gold;}       /*权重为:1+10+10*/ 
#header strong{color:pink;}       /*权重为:100+1*/ 
#header strong.blue{color:red;}  /*权重为:100+1+10*/

对应的HTML结构为：

<p class="father" id="header" >
    <strong class="blue">文本的颜色</strong>
</p>

这时，页面文本将应用权重最高的样式，即文本颜色为红色。

此外，在考虑权重时，读者还需要注意一些特殊的情况，具体如下。

●继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

例如下面的CSS样式代码：

strong{color:red;}
#header{color:green;}

对应的HTML结构为：

<p id="header" class="blue">
    <strong>继承样式不如自己定义</strong>
</p>

在上面的代码中，虽然#header具有权重100，但被strong继承时权重为0，而strong选择器的权重虽然仅为1，但它大于继承样式的权重，所以页面中的文本显示为红色。

●行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，它拥有比上面提高的选择器都大的优先级。

●权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。例如：

/*CSS文档，文件名为style.css*/
#header{color:red;}               /*外部样式*/

HTML文档结构如下。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>CSS优先级</title>
 6 <link rel="stylesheet" href="style.css" type="text/css"/> 
 7 <style type="text/css"> 
 8 #header{color:gray;}    /内嵌式样式/ 
 9 </style>
 10 </head>
 11 <body>
 12 <p id="header">权重相同时，就近优先</p>
 13 </body>
 14 </html>

上面的页面被解析后，段落文本将显示为灰色，即内嵌式样式优先，这是因为内嵌样式比链入的外部样式更靠近HTML元素。同样的道理，如果同时引用两个外部样式表，则排在下面的样式表具有较大的优先级。

如果此时将内嵌样式更改为：

p{color:gray;}             /*内嵌式样式*/

此时权重不同，#header的权重更高，文字将显示为外部样式定义的红色。

● CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何、位置的远近，使用!important的标签都具有最大优先级。例如：

/*CSS文档，文件名为style.css*/
#header{color:red!important;}      /*外部样式表*/

HTML文档结构如下。

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>!important命令最优先</title>
 6 <link rel="stylesheet" href="style.css" type="text/css" /> 
 7 <style type="text/css">
 8 #header{ color:gray;}
 9 </style>
 10 </head>
 11 <body>
 12 <p id="header" style="color:yellow">  <!--行内式CSS样式-->
 13 天王盖地虎，!important命令最优先
 14 </p>
 15 </body>
 16 </html>

该页面被解析后，段落文本显示为红色，即使用!important命令的样式拥有最大的优先级。需要注意的是，!important命令必须位于属性值和分号之间，否则无效。

复合选择器的权重为组成它的基础选择器权重的叠加，但是这种叠加并不是简单的数字之和。无论再在外层添加多少个div标签，即复合选择器的权重无论为多少个标签选择器的叠加，其权重都不会高于类选择器。同理，复合选择器的权重无论为多少个类选择器和标签选择器的叠加，其权重都不会高于id选择器。