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

Question

我想了解 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>

选择器优先级如何工作？

Answer 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 发挥作用：

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

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

Answer 2

1. 元素
2. 类选择器
3. ID 选择器
4. 内联样式
5. !重要

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

Answer 3

你感兴趣的是specificity。

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

Answer 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 一个测试用例。