CSS权重 - 掘金

通常，在我们的布局中，css每条规则的权重是导致应用在元素上的css没有生效的主要原因。为此，我们需要了解浏览器是如何利用权重进行解析的。

css 权重的概念

css 权重即每条 css 在应用时所占据的分量，优先级如何，它决定了浏览器如何将这条规则应用到相应的元素上。每一个选择器都有自己的权重级别，而每一条 css 规则的权重是由这些选择器的权重加权而成，最终，权重高的 css 将会应用到相应的元素上。

权重的等级

在 css 中不同的选择器有不同的权重等级，主要分为以下四个等级:

内联样式

内联样式(行内样式)即通过 style 属性直接写在元素上的样式，如下
```
  <div style={{ color: red }}>
```
id 选择器

id 是一个元素的标识，id 选择器通过#表示，如下:
```
// css
#title {
  color: red;
}
// html
<div id="title">
```

类、伪类、属性选择器

这三种选择器为同一等级。

  .root {
    background: red;
  }
  .root:hover {
    background: black;
  }
  [title] {
    background: blue;
  }
  <div class="root" title="css"></div>

元素、伪元素选择器

这两种选择器为同一等级。
```
  .div {
    background: red;
  }
  .div::selection {
    background: black;
  }
  <div>css</div>
```
关于选择器的知识可以查看CSS 选择器一文。

权重的计算

定性来说，css 权重大小顺序如下!important > 内联样式 > ID > 类、伪类、属性 > 元素、伪元素 > 继承 > 通配符，为了方便计算，有聪明的 boy 给每个等级定义了一个基数，即

!important: 无穷大
内联样式: 1000
ID: 100
类、伪类、属性: 10
元素、伪元素: 1
通配符: 0

权重计算时，每遇到一个选择器就加上相应的基数，总和大的认为权重更高。如下:

style=""                    => 1000(一个行内样式)
#title{}                    => 100(一个ID选择器)
.root                       => 10(一个类)
[title]                     => 10(一个属性)
div                         => 1(一个元素)
*{}                         => 0(通配符)
div span {}                 => 1+1=2(两个元素)
div h1+span {}              => 1+1+1=2(三个元素)
div:first-child             => 1+10=11(一个元素，一个伪类)
div [title]                 => 1+10=11(一个元素，一个属性选择器)
body #title .root p {}      => 112(1+100+10+1，两个元素，一个Id选择器，一个类)

需要注意的是，这种计算方式只是为了便于理解而使用的方法，它并不一定准确。

权重的基本规则

权重大的 css 生效

如下，由于 body div 的权重(2)大于 div 的权重(1)，因此 div 的背景色为蓝色。

  <style type="text/css">
    body div {
      background: blue;
    }
    div {
      height: 100px;
      width: 100px;
      background: red;
    }
  </style>
  <body>
    <div>css</div>
  </body>

相同的权重，后面的规则覆盖前面的规则

如下，div 背景色红色在蓝色后，因此 div 最终为红色。

  <style type="text/css">
    div {
      background: blue;
    }
    div {
      background: red;
      height: 100px;
      width: 100px;
    }
  </style>
  <div>css</div>

1. 拥有更高权重等级的 css 权重更高
也就说对于不同等级的选择器，即使低等级的选择器再多，其权重仍小于只有一个高等级选择器的 css。例如 11 个 class 和一个 id，利用前述的计算方法 11 个 class 的权重为 110，id 权重为 100，class 权重值更大，但是这并不成立，这种情况下之前的计算方法不再适用。如下，由于 id 比 class 高一个等级，因此，id 选择器权重更高，div 最终为红色背景
```
  <style type="text/css">
    .root1 .root2 .root3 .root4 .root5 .root6 .root7 .root8 .root9 .root10 .root11 {
      background: blue;
    }
    #root {
      background: red;
      height: 100px;
      width: 100px;
    }
  </style>
  <div id="root" class="root1"   class="root2" class="root3"  class="root4"  class="root5"  class="root6"  class="root7"  class="root8"  class="root9"  class="root10"  class="root11" ></div>
```