Skip to main content

深入理解CSS选择器优先级

什么是选择器优先级（Specificity）​

直接复制了 MDN对优先级的定义 ：

浏览器通过优先级来判断哪一些属性值与一个元素最为相关，从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

这句话也是很抽象，暂且先不管它了。但是我们可以先看一个例子：

  • HTML:
<div id="content" class="content">
我是什么颜色
</div>复制代码
  • CSS：
#content {
    color: #f00;
}
.content {
     color: #0f0;
}复制代码

那最后文字是什么颜色呢？答案很简单：红色。这就涉及到了优先级问题，同一块内容，我们同时用了 ID选择器 和 类选择器,因为 ID选择器 优先级大于 类选择器 , 所以最终显示为红色。

优先级的计算规则​

相信每位写过CSS的朋友都知道，CSS选择器的优先级关系是:

内联 > ID选择器 > 类选择器 > 标签选择器。

但是，浏览器具体的优先级算法是怎样的？可能还有些人不知道 。《CSS REFACTORING》 中提到了算法的过程 。

A specificity is determined by plugging numbers into (a, b, c, d):

  1. If the styles are applied via the style attribute, a=1; otherwise, a=0.
  2. b is equal to the number of ID selectors present.
  3. c is equal to the number of class selectors, attribute selectors, and pseudoclasses present.
  4. d is equal to the number of type selectors and pseudoelements present.

翻译过来就是

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

  1. 如果存在内联样式，那么 A = 1, 否则 A = 0;
  2. B 的值等于 ID选择器 出现的次数;
  3. C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
  4. D 的值等于 标签选择器 和 伪元素 出现的总次数 。

优先级的特殊情况​

经过上面的优先级计算规则，我们可以知道内联样式的优先级是最高的，但是外部样式有没有什么办法覆盖内联样式呢？有的，那就要 !important 出马了。因为一般情况下，很少会使用内联样式 ，所以 !important 也很少会用到！如果不是为了要覆盖内联样式，建议尽量不要使用 !important 。、

那可能有人会想，那如果我内联样式用了 !important，是不是外部样式就没有办法了呢？比如下面的代码：

  • HTML:
<div class="app" style="color:#f00!important">666</div>复制代码
  • CSS:
.app {
    color: 0f0!important;
}复制代码

是的，你赢了，这时候内联样式已经强大到不管你外部样式怎么写都无法覆盖它了。这种情况在实际代码中是要杜绝的！记住，千万不要在内联样式中使用 !important

最后 ， !important 真的是的无法超越的王者吗？其实不是的，一些情况，我们可以超越 !important, 请看下面的例子：

  • html:
<div class="box" style="background: #f00; width: 300px!important;">我的宽度是多少呢？？<div>复制代码
  • css:
.box {
    max-width: 100px;
}复制代码

这时候 .box 的宽度只有 100px , 而不是 300px, 可见，max-width 可以超越 width!important!但是，这实际上不是优先级的问题，因为优先级是比较相同属性的，而 max-width 和 width 是两个不同的属性。之所以举这个例子，是要告诉大家，有时候不管怎么设置容器的 width 都不生效，检查一下是不是有人写了 max-width 坑了你哈。

Last updated on by hanami