了解CSS选择器的优先级/特性 [英] Understanding CSS selector priority / specificity
问题描述
我想了解 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：white;
}
< html>
< body>
< div id =my_idclass =my_class> hello< / div>
< / body>
< / html>
对于某些人来说，这可能是显而易见的，但对我来说不是这样！
是否存在一些指南或链接，我终于可以了解选择器优先级的工作原理了？
只是在链接到CSS 2.1规范本身，以及浏览器是如何假设来计算特异性的：
选择器的特异性计算如下：
- 如果声明来自样式属性而不是规则（= a）（在HTML中，元素的style属性值是样式表规则，这些规则没有选择器，所以a = 1，b = 0，c = 0和d = 0。 ）
- 计算选择器中ID属性的数量（= b）
- 计算s中其他属性和伪类的数量elector（= c）
- 计算选择器中元素名称和伪元素的数量（= d）
- 特性仅基于选择器的形式。特别是，即使id属性被定义为ID，也将[id = p33]形式的选择器计为属性选择符（a = 0，b = 0，c = 1，d = 0） 在源文档的DTD中。
连接四个数字abcd（在数字系统中有一个大基数） / p>
- 最后，按指定顺序排序：如果两个声明具有相同的权重，原点和特异性，则后者指定胜利。导入样式表中的声明被认为是在样式表本身中的任何声明之前。 这是在谈论样式何时被定义，而不是何时被使用。如果类
.a和.b具有相同的特性，则样式表中最后一个 获胜。< p class =ab> ...< / p>和< p class =ba> .. 。将根据.a和.b 的定义顺序， code>。I'd like to understand how
CSSselectors work with properties collisions, how a property is selected instead of 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:white; } <html> <body> <div id="my_id" class="my_class">hello</div> </body> </html>For someone this could be obvious, but not for me!
Does exist some guide or link where I can finally understand how selector priority works?
解决方案I'll just toss in a link to the CSS 2.1 spec itself, and how browsers are supposed to calculate specificity:
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:
- 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
.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.这篇关于了解CSS选择器的优先级/特性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
