【前端帮帮忙】第5期关于CSS权重，你了解多少？

前言

配图是小孩叠的积木，觉得刚好符合这个主题，所以就拿来做封面了哈。

什么是CSS权重？

CSS权重，我们可以简单理解为CSS优先级。来看下MDN官网对优先级的描述：

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

我们通过一个小例子来加深理解下：

<p class="text" id="text">我是一段简单的文本。</p>

.text {
    color: red; // 红色
}

#text {
    color: blue; // 蓝色
}

运行后，可以看到p标签文本的颜色为蓝色。

那么为什么会是蓝色的？这就是CSS权重来决定的。决定最终用哪个样式作用到该p标签上。

上面代码说明：ID选择器的权重大于类选择器，所以CSS权重跟选择器的分类密切相关。如果您对CSS选择器还不太了解，或者说不太清楚CSS有哪些选择器，个人建议你先阅读以下几篇文章，这样更有助于帮助你阅读本文后面的内容：

《CSS3基本选择器》

《CSS3属性选择器》

《CSS3伪类选择器》

选择器的类型

类型选择器(例如,h1)和伪元素选择器(例如,:before)
类选择器(例如,.example)和属性选择器(例如,[type="radio"])，伪类选择器(例如,:hover)
ID选择器(例如,#example)

上面列表中，选择器类型的优先级是递增的。

通配符选择器(*)和关系选择器(~,+,>,)和否定伪类:not()对优先级没有影响。（但是在:not()内部声明的选择器会影响优先级）。

给元素添加内联样式（例如,style="font-weight: bold;"）总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。除了一个例外的规则!important，这个看下MDN官网对其的详细讲解。

CSS权重概述

权重决定了你的CSS规则怎么样被浏览器解析直到生效
权重决定了哪一条规则会被浏览器应用到元素上
每个选择器都有自己的权重
如果两个选择器作用到同一元素上，则权重高者生效
如果两个选择器权重相同，则最后定义的规则被计算到权重中（后面定义的CSS规则权重要更大，会覆盖前面的CSS规则）

选择器权重的计算

除了上面通过选择器的类型，我们可以大概知道谁的权重值更高，但是如果想更深入的理解CSS权重和更好的利用CSS权重来编写更加灵活的样式，我们还需要明白选择器的权重是如何计算的。

A：如果样式是写在标签的style属性中（内联样式），这A=1，否则，A=0。对于内联样式，由于没有选择器，所以B、C、D的值都为0，即A=1,B=0,C=0,D=0（简写为1,0,0,0，下同）。
B：计算选择器中ID的数量。（例如，#header这样的选择器，计算为0,1,0,0）。
C：计算选择器中类选择器、属性选择器和伪类的数量。（例如.logo[id='site-logo']这样的选择器，计算为0,0,2,0）
D：计算选择器中类型选择器和伪元素的数量。例如（p:first-letter这样的选择器，计算为0,0,0,2）
忽略通用选择器

CSS2规范中给出的一些例子：

* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

根据这样的定义，很多网站的文章简单的把CSS权重归纳为：内联样式的权重值是1000，ID选择器的权重是100，class选择器的权重值是10，标签选择器的权重值是1，整条规则的权重值相加得到整个样式规则的权重值，数值越大权重就越高。

还有一个我们应该很熟悉的公式：important > 内联 > ID > 类|属性|伪类 > 标签|伪元素 > 通配符 > 继承。

大多数情况下，按照这样的理解得出的结论是没问题的，但是遇到下面的情况就出现问题了：

/* 样式一 */
body header div nav ul li div p a span em { color: red; }

/* 样式二 */
.count { color: blue; }

按照错误的计算方法，样式一的权重值为11，样式二的权重值为10，如果这两条规则作用于同一个元素，则元素的文本颜色应该为红色，而实际上却是蓝色。

我们把上面两条规则应用到一个em元素上，在浏览器中来看个究竟：

<em class="count">我最终的文本颜色是？</em>

可以看到最终的颜色是：蓝色。

权重值的比较

为什么会出现例子中的情况，这就涉及到权重值的比较规则，我们一起来了解下。

按照四组正确的计算方法，上面例子中样式一的权重值应该是0,0,0,11，样式二的权重值是0,0,1,0。

按照规范，计算权重值时，A,B,C,D四组值，从左到有，分组比较，如果A相同，比较B，如果B相同，比较C，如果C相同，比较D，如果D相同，后定义的优先。

样式一和样式二的A,B相同，所以比较C，而样式二的C大于样式一，所以，不管D值如何，样式二的权重都大于样式一。这才是正确的计算权重的方法。

举个更容易理解的栗子哈：1张百元大钞大，还是99张1元的加起来大？明白了吧，哈哈~

例外的`!important`规则

在按照ABCD四组计算比较之外，还可以对某一个属性使用!important规则。需要特别注意的是，这里的“!”与其在编程语言中的意义恰好相反，不是代表“不重要”二是代表“很重要”。

CSS2 规范中规定：!important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。

我们来看个例子：

<header id="header">
  <nav>
    <ul>
      <li class="current has-important">首页</li>
    </ul>
  </nav>
</header>

/* 样式一 */
#header nav ul li.current {
  color: red;
  font-weight: bold;
}

/* 样式二 */
li.has-important {
  color: blue !important;
  font-weight: normal;
}

就整条规则而言，样式一的权重值为0, 1, 1, 3，而样式二的权重值仅为0, 0, 1, 1。所以应用于相同元素时，应该样式一生效。但是对于color属性，由于在样式二中，用!important做了指定，因此color将应用样式二的规则，而font-weight还是用样式一的规则。在浏览器看下实际效果：

那如果多条规则中都对同一属性指定了!important呢？我们再来简单写个例子测试下：

<div id="multipleImportant" class="multiple-important">
  如果多条规则中都对同一属性指定了`!important`，谁生效？
</div>

/* 样式一 */
#multipleImportant {
  color: red !important;
}

/* 样式二 */
.multiple-important {
  color: blue !important;
}

其实这时候!important的作用已经相互抵消了，依然按照ABCD四组计算来比较。很明显，id选择器的权重要比class选择器权重高，所以最终样式一生效，文本显示红色。

但是，使用!important是一个坏习惯，我们应该尽量避免。因为这破坏了样式表中固有的级联规则，使得调试bug变得更加困难了。

来自MDN上的一些经验法则：

一定要优先考虑使用样式规则的优先级来解决问题而不是!important
只有在需要覆盖全站或外部CSS（例如引用的 ExtJs 或者 YUI ）的特定页面中使用!important
永远不要在全站范围的css上使用!important
永远不要在你的插件中使用!important

取而代之，你可以：

更好的利用CSS级联属性
使用更具体的规则。在您选择的元素之前增加一个或多个元素，使选择器变得更加具体，并获得更高的优先级。

比如下面这个例子：

<div id="test">
  <span>Text</span>
</div>

div#test span { color: green }
span { color: red }
div span { color: blue }

上面例子中，无论你CSS语句的顺序是什么样的，文本都会是绿色的（green）,因为这一条规则是最具有针对性，优先级最高的。（同理，无论语句顺序怎么样，蓝色（blue）的规则都会覆盖红色的规则（red））。

什么情况下可以使用`!important`

A)一种情况

你的网站上有一个设定了全站样式的CSS文件
同时你（或是你同事）写了一些很差的内联样式

在这些情况下，你就可以在你全局的CSS文件中写一些!important的样式来覆盖掉那些直接写在元素上的行内样式。

活生生的例子比如：一些写得很糟糕的jQuery插件里面使用的内联样式。

B)另一种情况

#someElement p { color: blue; } p.awesome { color: red; }

在外层有#someElement的情况下，你怎样能使awesome的样式变成红色呢？如果不使用!important，第一条的规则永远比第二条规则权重更高。

怎样覆盖`!important`

A)很简单，只需再添加一条带!important的CSS规则，要么给这个选择器更高的优先级（添加一个标签，ID或类）；或是添加一样的选择器，把它的位置放在原有声明的后面。

一些拥有更好的优先级的例子，从上到下，优先级是递增的：

table td    { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }

B)或者使用相同的选择器，但是置于已有的样式之后：

td { height: 50px !important; }

C)或干脆改写原来的规则，以避免使用!important

关于inherit

除了直接指定到元素上的样式规则外，每个属性值还有一个可能为inherit（继承）的值。表示元素的样式属性继承自父元素，与父集元素的定义一致。

看个例子：

<ul class="list">
    <li class="item">
        <span>文本文本文本</span>
    </li>
</ul>

.list .item { color: red; }

上面的例子中，我们并没有给span添加color属性，但是span的文本颜色会是红色的，这就是因为span的color属性默认值为inherit。

对于inherit属性，只需要记住一点：继承而来的值权重永远低于明确指定到元素的定义。只有当一个元素的某个属性没有被直接指定时，才会继承父级元素的值。

再看个例子：

<ul class="list">
    <li class="item">
        <span>文本文本文本</span>
    </li>
</ul>

.list .item { color: red; }

span { color: blue; }

上面的例子中，第一条规则按照ABCD四组计算的权重为0,0,2,0；第二条规则的权重为0,0,0,1；虽然第一条规则的权重更高，但是它是针对li元素的直接指定，并不是针对span元素定义的，所以计算span的color属性权重值时，实际上就是inherit的红色与直接指定的蓝色对比。按照规则，只要有直接指定的值（蓝色），就不会再继承父级元素的值（红色），所以最终span的文本颜色为蓝色。

关于inherit规则，最典型的场景就是链接文字的颜色。通常浏览器自带的样式表都有针对a标签的颜色及下划线的直接指定，所以我们自定义的样式表中对a标签的父级指定color属性和text-decoration属性，通常是不会起作用的。我们来看个例子：

<p class="txt">
  <a href="#">父级元素设置的color和text-decoration对我不起作用</a>
</p>

.txt {
  color: red;
  text-decoration: none;
}

我们在浏览器可以看到，尽管我们给a标签的父级p设置了颜色红色和去除下划线，a标签依然是蓝色的和带下划线的。

即使你给它们都加上!important，也无效。

但是我们可以通过下面的reset来改变这一点：

a {
  color: inherit;
  text-decoration: inherit;
}

.txt {
  color: red;
  text-decoration: none;
}

再来看下效果：

可以看到，父级设置的样式生效了。由于我们的样式表对a标签直接指定了color和text-decoration属性值，覆盖了浏览器的默认样式，所以在没有特别指定a标签的颜色和下划线定义的前提下，会从父级元素p继承，因此链接会显示红色和没有下划线。

注意：inherit 在 CSS1 规范中并未定义，所以 IE6, IE7 以及 IE8 的 QuirksMode 不支持。

有意思的a标签

我们直接看例子：

<a href="#">鼠标划入时，我的颜色是？</a>

a:hover {
  color: red;
}

a:link {
  color: blue;
}

我们希望的效果是鼠标移入a标签的时候，文字变成红色的。实际上呢？仍然是蓝色。

为什么会这样呢？

其实，a标签的四个伪类（:link、:hover、active、visited）的优先级是一样的，所以这时候就看他们在样式文件中的顺序了，后面的会覆盖前面的，这回你知道为什么了吧。

为了避免出现这样的情况，我们在写a标签的伪类的时候，要注意它们的顺序，遵循：:link、:visited、:hover、:active。

在网上看到的例子

之前在其他网站上，看到这样一个例子，大概是这样的：

<p class="blue red">我的颜色是？</p>
<p class="red blue">我的颜色是？</p>

.red {
  color: red;
}

.blue {
  color: blue;
}

问：两个p标签的文本颜色分别是什么？

答案是：都是蓝色的

这边要注意的是：class中的类名的顺序并不会影响样式的优先级，而是由它们在样式文件中的先后顺序决定的，后面定义的优先级更高。

总结

权重的大小跟选择器的类型和数量有关
样式的优先级跟样式的定义顺序有关，后面的覆盖前面的
一条样式规则的整体权重值包含四个独立的部分：[A,B,C,D]
A表示内联样式，只有1或0两个值
B表示选择器中ID的数量
C表示选择器中类、属性、伪类选择器的数量
D表示选择器中伪元素及标签的数量
比较时，从低位到高位（从A到D）分别比较，高位相同时才比较低位
标签选择器的权重永远都比一个类选择器的权重低，无论有多少个，除非使用!important
有!important标记指定的属性权重值最高；多次指定时，相互抵消；应尽量减少!important的使用
inherit而来的属性定义，优先级低于任何直接指定的属性值

最后

这篇文章断断续续写了好多天，但也算比较详细，自己也比较深入的学习了CSS权重相关的知识。

感谢耐心读完，如果还有什么疑问或者建议，可以多多交流。

好了，本文到此结束，希望对你有帮助 :)

参考

developer.mozilla.org/zh-CN/docs/…

www.w3cplus.com/css/css-spe…

www.cnblogs.com/luckyflower…

blog.cssforest.org/2011/05/19/…

关注

感谢大家关注我的公众号，一起学习成长~

【前端帮帮忙】第5期 关于CSS权重，你了解多少？