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

Question

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

null

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>

null

选择器优先级是如何工作的？

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属性在源文档的DTD中被定义为“id”。

把a-b-c-d四个数字（在一个大基数的数字系统中）串联起来就给出了特异性。

如果特性相等，则CSS 2.1第6.4.1节开始起作用：

注意，这是在讨论样式定义时的问题，而不是在使用时的问题。如果类.a和.b具有相同的专用性，则以样式表中最后定义的为准。

...

和

...

将根据 .a和 .b的定义顺序使用相同的样式。