了解 CSS 选择器优先级/特异性 [英] Understanding CSS selector priority / specificity

问题描述

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

div {背景颜色:红色；}div.my_class {背景颜色:黑色；}div#my_id {背景颜色:蓝色；}身体 div {背景颜色:绿色；}身体>div {背景颜色:橙色；}身体>div#my_id {背景颜色:粉红色；}

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

选择器优先级如何工作?

解决方案

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

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]"形式的选择器可以使用[id=p33]"形式的选择器.被算作一个属性选择器(a=0, b=0, c=1, d=0)，即使id属性被定义为一个ID".在源文档的 DTD 中.

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

如果具体情况相同，则 CSS 2.1 第 6.4.1 节 发挥作用:

<块引用>

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

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

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

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?

解决方案

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

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.

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

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.

Note that this is talking about when the style is defined, not when it is used. If classes .a and .b have 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 .a and .b.

这篇关于了解 CSS 选择器优先级/特异性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！