【前端帮帮忙】第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规则权重要更大,会覆盖前面的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)一种情况

  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的文本颜色会是红色的,这就是因为spancolor属性默认值为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元素定义的,所以计算spancolor属性权重值时,实际上就是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标签直接指定了colortext-decoration属性值,覆盖了浏览器的默认样式,所以在没有特别指定a标签的颜色和下划线定义的前提下,会从父级元素p继承,因此链接会显示红色和没有下划线。

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

有意思的a标签

我们直接看例子:

<a href="#">鼠标划入时,我的颜色是?</a>
a:hover {
  color: red;
}

a:link {
  color: blue;
}

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

为什么会这样呢?

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

为了避免出现这样的情况,我们在写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权重相关的知识。

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

好了,本文到此结束,希望对你有帮助 🙂

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

https://www.w3cplus.com/css/css-specificity-things-you-should-know.html

https://www.cnblogs.com/luckyflower/p/4301246.html

http://blog.cssforest.org/2011/05/19/重新认识CSS的权重.html

关注

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