李晓的博客

CSS —— 优先级

2020/05/15 CSS

CSS 中的优先级也叫做特异性，浏览器使用它来判断在元素上使用何种属性，优先级是基于不同的选择器组合而成的匹配规则。

选择器的优先级

下面罗列的选择器，选择器的优先级是递增的：

1、类型选择器(例如：h1)和伪元素选择器(例如：::after) 2、类选择器(例如: .example)，属性选择器(例如：[type="checkbox"])和伪类选择器(例如：:hover) 3、ID选择器(例如：#example)

通配符选择器、(*)关系选择器、否定伪类对优先级没有影响，但是在 :not() 内部声明的选择器，会影响优先级。

关于选择器是如何计算的，可以通过下面这张图来简单易懂的理解：

!important 的规则

!important 并不是一个优先级的计算规则，但是它影响最终的结果，当一个样式声明中使用了 !important 的规则时，此声明将覆盖任何其他声明。 使用 !important 是一个坏习惯，应当尽量避免，因为这破坏了样式表中的固有的级联规则，使得调试或找 bug 时变得更加困难。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时，拥有更大的优先级的声明的将会被采用。

下面引用 MDN 文档中建议的经验： - 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important - 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important - 永远不要在你的插件中使用 !important - 永远不要在全站范围的 CSS 代码中使用 !important

与其使用 !important , 可以这样：

1、更好的利用 CSS 的级联属性

2、使用更具体的规则，或者写出更高优先级的 CSS 规则来代替

这是我们的 DOM 结构：

<div id="test" class="myClass">
  <span>Text</span>
</div>

/* 利用 css 级联属性，使选择器更具体 */
div#test span { color: green; }
div span { color: blue; }
span { color: red; }

在上面的代码中，不论 CSS 的语句顺序是怎样的，文本都会是绿色的，因为 ID选择器的优先级是最高的。

如果你已经碰到了最高优先级的 ID 选择器，该怎么办呢，有个 hack 的方法，可以复制简单的选择器，以增加优先级，就好比在优先级的计算中做加法，例如下面的代码：

/* 复制简单的选择器，以增加特异性 */
div#test#test span { color: yellow; }
.myClass.myClass span { color: orange; }

什么情况下使用 !important

覆盖内联样式

在团队协作中，有他人的代码使用了内联样式，而需要去覆盖的时候。或者在使用一些库或者框架的代码时，有一些样式写在了内联样式中。

在这种情况下，你就可以在你全局的 CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式。

这是内联样式的HTML代码:

<div class="foo" style="color: red;">What color am I?</div>

/* 覆盖内联样式 */
.foo[style*="color: red"] {
  color: firebrick !important;
}

我们可以通过这种方式来覆盖内联样式。

2、覆盖优先级高的选择器

<div id="someElement">
  <p class="awesome">Awesome</p>
</div>

/* 覆盖优先级高的选择器 */
#someElement p {
  color: blue;
}
p.awesome {
  color: red;
}

在外层有 #someElement 的情况下，你怎样能使 awesome 的段落变成红色呢？这种情况下，除了用前文提到的 hack 方法外，如果不使用 !important ，第一条规则永远比第二条规则的优先级更高。

怎样覆盖 !important

1、很简单，只需要再添加一条带 !important 的 CSS 规则，然后再给选择器更高的优先级。或是添加一样选择器，把它的位置放在原有声明的后面

   table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }

2、或者使用相同的选择器，但是置于已有的样式之后；

td { height: 50px !important; }

3、或干脆改写原来的规则，以避免使用 !important

[id="someElement"] p {
  color: blue;
}

p.awesome {
  color: red;
}

Search

    Table of Contents