css选择器的优先级

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

问题

我们都知道css选择器是有优先级的。就是说当一个元素同时满足多个css选择器的时候，优先级高的css选择器的样式会优先应用，那具体优先级的规则是怎样的呢？今天来学习下。

css选择器

我们首先来了解css有哪些选择器， 如下

• id选择器(#test)
• class选择器(.test)，属性选择器([class*="test"])，伪类选择器(:hover)
• 标签选择器(div)，伪元素选择器（比如::before）
• 通用选择器（*）, 后代选择器(>)，兄弟选择器(+, ~)等

优先级

针对以上选择器，优先级的顺序是

1. id选择器
2. (class选择器 = 属性选择器 = 伪类选择器)
3. 标签选择器 = 伪元素选择器
4. 通用选择器= 后代选择器(>) = 兄弟选择器(+, ~)

它们对应的优先级权重是0100，0010， 0001， 0000

额外补充：

除了以上的选择器，css还有内联样式，!important这两种写法。 其中!important的权重是最高的，内联样式是1000。都比上面的选择器的权重高。

优先级的规则：

• !important最高， 内联样式次之，然后到上面的选择器。
• 按照顺序比较，前面的相等，再接着比较后一项，直到结尾。
• 如果比较完后，权重相等，则后面的会覆盖前面的样式。

例子

第一个：

  <div class="test">123</div>
  <style>
    div {
      color: green;
    }
    .test {
      color: red;
    }
  </style>

class选择器权重比标签选择器高

第二个：

  <div class="box">
    <div class="test">123</div>
  </div>
  <style>
     
    .box div:nth-child(1) {
      color: green;
    }
    .box div.test {
      color: red;
    }
  </style>

权重都是0021，后面会覆盖前面的样式

第三个：

  <div class="box">
    <div class="test" style="color: blue">123</div>
  </div>
  <style>
     
    .box div:nth-child(1) {
      color: green;
    }
    .test {
      color: red !important;
    }
  </style>

!important的权重最高