深入了解CSS選擇器的優先權與特異性
P粉036800074
2023-08-22 22:06:31
<p>我想了解CSS選擇器在屬性衝突中是如何運作的。一個屬性如何被選擇而不是另一個屬性？ </p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">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;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="my_id" class="my_class">hello</div></pre>
<p><br /></p>
<p>選擇器的優先權是如何運作的？ </p>
依序，1是最低的特定性，5是最高的。 https://youtu.be/NqDb9GfMXuo將顯示詳細資訊以進行示範。
我只是在這裡添加一個連結到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的定義順序以相同的樣式進行設定。