html - 了解 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 :

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.

如果特异性相等，则CSS 2.1 Section 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.

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