Erfahren Sie mehr über die Priorität und Spezifität von CSS-Selektoren

Question

Ich möchte verstehen, wie CSS-Selektoren bei Eigenschaftskonflikten funktionieren. Wie wird ein Attribut einem anderen vorgezogen?

div {
  Hintergrundfarbe: rot;
}

div.my_class {
  Hintergrundfarbe: schwarz;
}

div#my_id {
  Hintergrundfarbe: blau;
}

Körper div {
  Hintergrundfarbe: grün;
}

body>div {
  Hintergrundfarbe: Orange;
}

body>div#my_id {
  Hintergrundfarbe: rosa;
}

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

Wie funktioniert die Selektorpriorität?

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的特异性相等，则在样式表中最后定义的类将获胜。<p class="a b">...</p>和<p class="b a">...</p>将根据.a和.b的定义顺序以相同的样式进行设置。