我想了解 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>
選擇器優先權如何運作？
依序，1 是最低特異性，5 是最高特異性。 https://youtu.be/NqDb9GfMXuo 將顯示示範詳細資訊。
我將添加一個指向 CSS 2.1 規範本身的鏈接，以及瀏覽器應該如何計算特異性：
CSS 2.1 第 6.4.3 節：
如果特性相同，則 CSS 2.1 第 6.4.1 節 發揮作用：
請注意，這裡討論的是樣式定義的時間，而不是使用的時間。如果類別
.a和.b具有相同的特異性，則以樣式表中最後定義的那個為準。...
...
.a和.b的定義順序。