css 权重值笔记

Gusvily
168 阅读5分钟

文档内容摘抄自MDN

地址：优先级 - CSS（层叠样式表） | MDN (mozilla.org)

优先级

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

优先级是如何计算的？

优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。

当同一个元素有多个声明的时候，优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

备注：  文档树中元素的接近度（Proximity of elements）对优先级没有影响。

选择器类型

下面列表中，选择器类型的优先级是递增的：

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

通配选择符（universal selector）（*）关系选择符（combinators）（+, >, ~, " ", ||）和 否定伪类（negation pseudo-class）（:not()）对优先级没有影响。（但是，在 :not() 内部声明的选择器会影响优先级）。

标签选择器计算权重公式
继承或者 *0,0,0,0
每个元素（标签选择器）0,0,0,1
每个类，伪类0,0,1,0
每个ID0,1,0,0
每个行内样式 style=""1,0,0,0
每个!important 重要的∞ 无穷大
您可以访问 "Specificity" in "Cascade and inheritance" 或者 specifishity.com 来了解更多关于优先级的详细信息。

给元素添加的内联样式 (例如，style="font-weight:bold") 总会覆盖外部样式表的任何样式，因此可看作是具有最高的优先级。

!important 例外规则

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

一些经验法则：

  • 一定要优先考虑使用样式规则的优先级来解决问题而不是 !important
  • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
  • 永远不要在你的插件中使用 !important
  • 永远不要在全站范围的 CSS 代码中使用 !important
  • 与其使用  !important，你可以：

  1. 更好地利用 CSS 级联属性

  2. 使用更具体的规则。在您选择的元素之前，增加一个或多个其他元素，使选择器变得更加具体，并获得更高的优先级。

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

    Copy to Clipboard

    div#test span { color: green; }
div span { color: blue; }
span { color: red; }

    Copy to Clipboard

    无论 c​ss 语句的顺序是什么样的，文本都会是绿色的（green），因为这一条规则是最有针对性、优先级最高的。（同理，无论语句顺序怎样，蓝色 blue 的规则都会覆盖红色 red 的规则）

  3. 对于（2）的一种特殊情况，当您无其他要指定的内容时，请复制简单的选择器以增加特异性。

    #myId#myId span { color: yellow; }
.myClass.myClass span { color: orange; }

    Copy to Clipboard

什么的情况下可以使用 !important：

A) 覆盖内联样式

你的网站上有一个设定了全站样式的 CSS 文件，同时你（或是你同事）写了一些很差的内联样式。

全局的 CSS 文件会在全局范围内设置网站的外观，而直接在各个元素上定义的内联样式可能会覆盖您的全局 CSS 文件。内联样式和 !important 都被认为是非常不好的做法，但是有时你可以在 CSS 文件里用 !important 去覆盖内联样式。

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

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

Copy to Clipboard

.foo[style*="color: red"] {
  color: firebrick !important;
}

Copy to Clipboard

许多 JavaScript 框架和库都添加了内联样式。有时候可以用!important与优先级高的选择器一起使用，以重写覆盖这些内联样式。

B) 覆盖优先级高的选择器
#someElement p {
  color: blue;
}

p.awesome {
  color: red;
}

Copy to Clipboard

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

怎样覆盖 !important

A) 很简单，只需再添加一条 带 !important 的 CSS 规则，再给这个给选择器更高的优先级（添加一个标签，ID 或类）；或是添加一样选择器，把它的位置放在原有声明的后面（总之，最后定义一条规则比胜）。

一些拥有更高优先级的例子：

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

Copy to Clipboard

B) 或者使用相同的选择器，但是置于已有的样式之后：

td { height: 50px !important; }

Copy to Clipboard

C) 或干脆改写原来的规则，以避免使用 !important。

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

p.awesome {
  color: red;
}

Copy to Clipboard

将 id 作为属性选择器的一部分而不是 id 选择器，将使其具有与类相同的特异性。上面的两个选择器现在具有相同的权重。在优先级相同情况下，后面定义的 CSS 样式会被应用。

avatar
文章
阅读
粉丝