【前端帮帮忙】第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伪类选择器》

选择器的类型

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

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

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

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

CSS权重概述

权重
权重

选择器权重的计算

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

style

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
!important
!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)一种情况

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

在这些情况下，你就可以在你全局的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中的类名的顺序并不会影响样式的优先级，而是由它们在样式文件中的先后顺序决定的，后面定义的优先级更高。

总结

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

最后

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

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

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