理解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>

选择器优先级是如何工作的？

- vitto

---

http://www.w3.org/TR/CSS2/cascade.html#specificity - drudge

Answer 1

我只是提供CSS 2.1规范本身和浏览器应该如何计算特异性的链接：

CSS 2.1第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属性在源文档的DTD中被定义为“ID”。

将四个数字a-b-c-d（在具有大基数的数字系统中）连接起来即可得到特异性。

如果特异性相等，则会使用CSS 2.1第6.4.1节：

最后，按照指定的顺序进行排序：如果两个声明具有相同的权重、来源和特异性，则后一个声明获胜。导入的样式表中的声明被认为在样式表本身中的任何声明之前。请注意，这是在定义样式时讨论的，而不是在使用时。如果类.a和.b具有相等的特异性，则在样式表中最后定义的类将获胜。基于.a和.b的定义顺序，

...

和

...

将具有相同的样式。

- Benn

---

到目前为止最好的解释：链接。当你滚动到“计算CSS特异性值”部分时，它开始变得非常有趣。 - Pedro Moreira

但是当两个特定性值相同时会发生什么？它会按照哪个规则先定义的顺序进行呢？ - Boom

这个问题在 https://www.w3.org/TR/CSS2/cascade.html#cascading-order 中有详细解释，具体是第四条规则，它适用于特异性之后。我会编辑答案并包含决定优先级的方法。 - Benn

@Boom：如果有多个具有相同特异性的规则，则应用样式表中最后出现的规则。希望这可以帮到你。 - Eggineer

Answer 2

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

按顺序，1是最低的特异性，5是最高的。 https://youtu.be/NqDb9GfMXuo将展示详细演示。

- li bing zhao

Answer 3

您感兴趣的是“特异性”。Firebug是一个很好的工具，可用于帮助检查此内容。但其他浏览器也有内置工具来检查应用的CSS规则。

- Jason McCreary

---

Firebug有没有特定（不是双关语）的工具来分析优先级？而不仅仅是查看被覆盖规则的删除线视图？ - Pekka

@Pekka，不，它没有。但对于这些类型的事情仍然是一个优秀的工具。 - Jason McCreary

@Pekka 在 HTML 标签的右侧，计算 (?) 标签（位于样式和外观之间）具有另一种被覆盖指令的删除线视图。比你在只关注一个属性时可能参考的样式中的那个更有用。 - FelipeAls

Answer 4

您可以在这里查看完整答案：Mozilla 文档 从最具体的开始： 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 a test case.

- Vincentius Ronalto