解码 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

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

Answer 2

我将添加一个指向 CSS 2.1 规范本身的链接，以及浏览器应该如何计算特异性：

CSS 2.1 第 6.4.3 节：

如果特性相同，则 CSS 2.1 第 6.4.1 节 发挥作用：

请注意，这里讨论的是样式定义的时间，而不是使用的时间。如果类 .a 和 .b 具有相同的特异性，则以样式表中最后定义的那个为准。

...

和

...

的样式相同，基于.a和.b的定义顺序。