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

Question

我想了解__CODE__选择器如何处理属性冲突,如何选择属性而不是另一个属性？

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;
}

对于某人来说,这可能是显而易见的,但不适合我!

是否存在一些指南或链接,我可以最终了解选择器优先级如何工作？

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属性被定义为"ID" "在源文档的DTD中.

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

如果具体情况相同,则CSS 2.1第6.4.1节开始起作用:

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

请注意,这是在定义样式时,而不是在使用时.如果类.a和.b具有相同的特异性,取其最后定义样式表(一个或多个)获胜. <p class="a b">...</p>而<p class="b a">...</p> 将同样的风格,根据定义顺序.a和.b.

Answer 2

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

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

Answer 3

你感兴趣的是特异性.

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