CSS 选择器权重与样式优先级

以前我一直只知道，css选择器的优先级就是内嵌样式 > id > class > tag，但是最近在写一个很简单的页面的时候，有人给我提出了这样的问题。深入了解之后我觉得很有必要在这里总结一下。

什么是权重

权重指某一因素或者指标对于某个事物的重要程度，并且强调了因素或指标的相对重要程度

CSS选择器权重

每一个CSS选择器都有一个来表示其重要程度的值，即权重的值，称作“权值”
css通过计算不同种选择器的权重占比，来计算选择器的总权值，最后根据总权值来确定样式规则的优先级次序。

权值的划分

先上一张熟悉的图

大致分为四个等级
第一个等级：内联样式，即写在标签里的style=" "，权值为1,0,0,0
第二个等级：ID选择器，即#ID{ }，权值为0,1,0,0
第三个等级：类选择器|伪类选择器|属性选择器，即.class{}|:hover|[type]，权值为0,0,1,0
第四个等级：标签选择器|伪元素选择器，即img|:after等，权值为0,0,0,1
除此之外的其他选择器，比如通用选择器（），子代选择器（>）等，不在此等级范围之内，所以权值均为0,0,0,0*

权值的计算

权值的计算不是把四个等级的选择器的总权值加起来的，而是
权值 = 第一个等级的选择器 × 第一个等级的选择器个数，第二个等级的选择器 × 第二个等级的选择器个数，第三个等级的选择器 × 第三个等级的选择器个数，第四个等级的选择器 × 第四个等级的选择器个数

权值如何进行比较

当两个权值进行比较时，从高位到低位逐位进行比较，而不是把四个等级的权值加起来进行比较。
比如有AB两个选择器，比较第一个等级时，A选择器的权值比较大，则直接应用A对应的样式，不再进行比较了。
总结一下就是：

从高等级开始比较，如果相同等级的权值相同，再继续进行下一个等级的比较。如果不相同，直接应用相同等级权值比较大的选择器对应的样式。
如果每个等级的权值均相同，则后定义的规则优先，即覆盖。
如果某个样式后面加了 !important，则绝对优先，比内联样式更优先。

几个例子

第一个例子

<html>
<head>
  <title>css选择器</title>
  <style media="screen">
    #father p{
      background:red;
    }

    .son p{
      background:blue;
    }
  </style>
</head>

<body>
  <div id="father">
    <div class="son">
      <p>balabalabalabala</p>
    </div>
  </div>
</body>
</html>

按照我们之前说的权值的计算和比较方法，第一个选择器（#father p）的权值应该是1,0,0,1，第二个选择器（.son p）的权值是0,1,0,1，按位比较的结果是第一个选择器的权值比较大，所以会优先使用第一种样式，所以结果为

那么当我们修改一下代码：

<html>
<head>
  <title>css选择器</title>
  <style media="screen">
    #father p{
      background:red;
    }

    .son.a.b.c.d.e.f.g.h.i.j.k p{
      background:blue;
    }
  </style>
</head>

<body>
  <div id="father">
    <div class="son a b c d e f g h i j k">
      <p>balabalabalabala</p>
    </div>
  </div>
</body>
</html>

这时第一个选择器（#father p）的权值为1,0,0,1，第二个选择器（.son.a.b.c.d.e.f.g.h.i.j.k p）的权值为0,12,0,1，这时p的背景颜色应该是什么呢？

还是红色，因为当第一等级比价权值时已经比较出大小了，所以即便第二个选择器的第二等级的权重有12，最后还是会应用第一个样式。

第二个例子

<html>
<head>
  <title>css选择器</title>
  <style media="screen">
    #father p{
      background:red;
    }

    #son p{
      background:blue;
    }
  </style>
</head>

<body>
  <div id="father">
    <div id="son">
      <p>balabalabalabala</p>
    </div>
  </div>
</body>
</html>

结果是

因为第一个和第二个选择器的权值均为1,0,0,1，所以后定义的样式优先被应用

第三个例子

<html>
<head>
  <title>css选择器</title>
  <style media="screen">
    #father p{
      background:red !important;
    }

    #son p{
      background:blue;
    }
  </style>
</head>

<body>
  <div id="father">
    <div id="son">
      <p style="background:green">balabalabalabala</p>
    </div>
  </div>
</body>
</html>

结果还是红色

因为即便p有内联样式控制背景为绿色，但是第一个样式中加了!important，所以有最高优先级。

好啦这篇文章的内容就是这么多，其实继承对于样式的优先级也是有影响的，但是这里提到的只是最基本的选择器权重与样式优先级，关于继承以后会在别的文章中提到。

如果发现有问题欢迎批评指正~

CSS 选择器权重与样式优先级

什么是权重