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

Understanding CSS selector priority / specificity

提问by vitto

I'd like to understand how CSS selectors work with property collisions. How is one property selected over another one?

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

How does selector priority work?

选择器优先级如何工作？

回答by Benn

I'll just toss in a link to the CSS 2.1 spec itself, and how browsers are supposedto calculate specificity:

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

CSS 2.1 Section 6.4.3:

CSS 2.1 第 6.4.3 节：

A selector's specificity is calculated as follows:

• count 1 if the declaration is from is a 'style' attribute rather than a rule with a selector, 0 otherwise (= a) (In HTML, values of an element's "style" attribute are style sheet rules. These rules have no selectors, so a=1, b=0, c=0, and d=0.)
• count the number of ID attributes in the selector (= b)
• count the number of other attributes and pseudo-classes in the selector (= c)
• count the number of element names and pseudo-elements in the selector (= d)
• The specificity is based only on the form of the selector. In particular, a selector of the form "[id=p33]" is counted as an attribute selector (a=0, b=0, c=1, d=0), even if the id attribute is defined as an "ID" in the source document's DTD.

Concatenating the four numbers a-b-c-d (in a number system with a large base) gives the specificity.

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

• 如果声明来自“样式”属性而不是带有选择器的规则，则计数为 1，否则为 0 (= a)（在 HTML 中，元素的“样式”属性的值是样式表规则。这些规则没有选择器，所以 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 中。

连接四个数字 abcd（在具有大基数的数字系统中）给出了特殊性。

If the specificities are equal, then CSS 2.1 Section 6.4.1comes into play:

如果特性相同，则CSS 2.1 第 6.4.1 节开始发挥作用：

4. Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.

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

Note that this is talking about when the style is defined, not when it is used. If classes .aand .bhave equal specificity, whichever is defined last in the stylesheet(s)wins. <p class="a b">...</p>and <p class="b a">...</p>will be styled identically, based on the definition order of .aand .b.

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

回答by Jason McCreary

What you are interested in is specificity.

您感兴趣的是特异性。

Firebug is a great tool to help inspect this. But other browsers also have built in tools for inspecting the applied CSS rules.

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

回答by li bing zhao

1. Element
2. Class selectors
3. ID Selectors
4. Inline styles
5. !important

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

In order, 1 is the lowest specificity and 5 is the highest. https://youtu.be/NqDb9GfMXuowill shown details to demo it.

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

回答by Vincentius Ronalto

You can refer the full answer here Mozilla documentation

您可以在此处参考Mozilla 文档的完整答案

Start from the most specific: id selectors > class selectors > type selectors(normal h1, p tag and so on..) !important always wins, but it is considered a bad practice.See the link above.

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

The best way is to experiment with it:

最好的方法是试验它：

  <!-- 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:

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'sa test case.

这是一个测试用例。