Skip to content

选择器的优先级

浏览器通过优先级来判断哪些属性值与一个元素最为相关,从而在该元素上应用这些属性值。

选择器类型

以下的选择器类型的优先级递减:

  1. ID 选择器(如 #example)。
  2. 类选择器(如 .example),属性选择器(如 [type="redio"])和伪类(如 :hover)。
  3. 类型选择器(如 h1)和伪元素(如 ::before)。

通配选择符(*)、关系选择符(+, >, ~, -, ||)和否定伪类(:not())对优先级没有影响。然而,在 :not() 内部声明的选择器会影响优先级。

给元素添加的内联样式总是会覆盖外部样式表的任何样式,因此可看作是最高的优先级。

!important 例外规则

在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有级联规则,使得调试变得困难。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。

注意:

  1. 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
  2. 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
  3. 永远不在全站范围中的 CSS 中使用 !important

与其使用 !important,不如:

  1. 更好地利用 CSS 级联属性。
  2. 使用更具体的规则。在选择的元素之前,增加一个或多个其他元素,使选择器变得更加具体,并获得更高的优先级。
  3. 当没有其他要指定的内容时,可以复制简单的选择器以增加特异性。

什么情况下使用 !important

  1. 覆盖内联样式。
  2. 覆盖优先级高的选择器。

Released under the MIT License.