深入了解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的特異性相等，則在樣式表中最後定義的類別將會獲勝。 <p class="a b">...</p>和<p class="b a">...</p>將根據.a和.b的定義順序以相同的樣式進行設定。