了解 CSS 选择器优先级/特异性

Posted 2023-03-04

【中文标题】了解 CSS 选择器优先级/特异性

【英文标题】：Understanding CSS selector priority / specificity

【发布时间】：2011-05-03 14:37:49

【问题描述】：

我想了解 CSS 选择器如何处理属性冲突。如何选择一个属性而不是另一个属性？

div 
  background-color: red;


div.my_class 
  background-color: black;


div#my_id 
  background-color: blue;


body div 
  background-color: green;


body>div 
  background-color: orange;


body>div#my_id 
  background-color: pink;

<div id="my_id" class="my_class">hello</div>

选择器优先级如何工作？

【问题讨论】：

w3.org/TR/CSS2/cascade.html#specificity

【参考方案1】：

我将提供一个指向 CSS 2.1 规范本身的链接，以及浏览器如何 计算特异性：

CSS 2.1 Section 6.4.3:

选择器的特异性计算如下：

如果声明来自是'style'属性而不是带有选择器的规则，则计数1，否则为0（= a）（在HTML中，元素的“style”属性的值是样式表规则。这些规则具有没有选择器，因此 a=1、b=0、c=0 和 d=0。） 统计选择器中 ID 属性的数量 (= b) 统计选择器中其他属性和伪类的数量 (= c) 计算选择器中元素名称和伪元素的数量 (= d) 特异性仅基于选择器的形式。特别是，“[id=p33]”形式的选择器被算作属性选择器（a=0, b=0, c=1, d=0），即使 id 属性被定义为“ID " 在源文档的 DTD 中。

连接四个数字 a-b-c-d（在具有大基数的数字系统中）给出了特异性。

如果特异性相同，则CSS 2.1 Section 6.4.1 发挥作用：

最后，按指定顺序排序：如果两个声明具有相同的权重、来源和特异性，则指定的后者获胜。导入样式表中的声明被认为在样式表本身的任何声明之前。

请注意，这里讨论的是何时定义样式，而不是何时使用。如果类.a 和.b 具有相同的特异性，则以样式表中最后定义的 为准。根据.a 和.b 的定义顺序，<p class="a b">...</p> 和<p class="b a">...</p> 的样式将相同。

【讨论】：

迄今为止最好的解释：link 当您向下滚动到“计算 CSS 特异性值”部分时，它开始变得非常有趣。

但是当两个特异性值相同时会发生什么？它是否遵循首先定义的规则？

w3.org/TR/CSS2/cascade.html#cascading-order 涵盖了这一点，特别是规则 4，它适用于特定性之后。我将编辑答案以包括打破平局。

@Boom ：如果有多个相同的特异性规则，则应用样式表中出现的最后一个规则。希望这会有所帮助。

【参考方案2】：

元素 类选择器 ID 选择器 内联样式 !重要

按顺序，1 是最低的特异性，5 是最高的。 https://youtu.be/NqDb9GfMXuo 将显示详细信息以进行演示。

【参考方案3】：

你感兴趣的是specificity。

Firebug 是一个很好的工具来帮助检查这一点。但其他浏览器也内置了用于检查应用的 CSS 规则的工具。

【讨论】：

Firebug 是否有特定的（没有双关语）工具来分析特异性？不仅仅是覆盖规则的删除线视图？

@Pekka，不，它没有。不过对于这些类型的事情来说仍然是一个很好的工具。

@Pekka 在 HTML 选项卡的右侧，Calculated (?) 选项卡（在样式和外观之间）有另一个覆盖指令的删除视图。当您只对 ONE 属性感兴趣时，可能比您所指的 Style 中的那个更有用。

【参考方案4】：

您可以在此处参考完整答案Mozilla documentation

从最具体的开始： id 选择器 > 类选择器 > 类型选择器（普通 h1、p 标签等..） !important 总是会获胜，但这被认为是一种不好的做法。请参阅上面的链接。

最好的方法是尝试一下：

  <!-- start class vs id -->
  <p class="class1" id="id1">.class vs #id: The winner is #id</p>

  <!-- upper vs bottom -->
  <p id="id2">the very bottom is the winner</p>

  <!--most specific is the winner -->
  <p id="id3">the most specific</p>

  <!--pseudo and target selector -->
  <h3>pseudo vs type selector</h3>

  <!-- !important is more important! -->
  <h1 id="very-specific">HI! I am very important!</h1>
  </body>

CSS：

#id1
    color: blue;


.class1
    color: red;


#id2
    color: yellow;


#id2
    color : green;


body p#id3
    color :orange;


body p
    color : purple;


body
    color : black;


h3::first-letter 
    color: #ff0000;



h3
    color: CornflowerBlue ; 


h1
    color: gray !important;


body h1#very-specific
    color: red;

Here's 一个测试用例。