CSS 具體性
了解 CSS 具體性的含義以及其重要性 當一個元素被多個具有不同選擇器的規則所影響時，會發生什麼情況？這些規則都影響相同的屬性。 例如，讓我們來談一談這個元素： <p class="dog-name">Roger</p> 我們可以有以下規則： .dog-name { color: yellow; } 還有另一個以 p 為選擇器的規則，它將顏色設置為另一個值： p { color: red; } 還有一個以 p.dog-name 為選擇器的規則。哪個規則將優先於其他規則，為什麼？ 這時要介紹一下具體性。最具體的規則將優先選擇。如果兩個或多個規則具有相同的具體性，則最後出現的規則將優先選擇。 對於初學者來說，實際上什麼是更具體的有點困惑。我想對於不常看這些規則的專家來說也是困惑的，或者只是忽視了它們。 如何計算具體性 具體性是使用一種約定方式來計算的。 我們有 4 個插槽，每個插槽的初始值為 0: 0 0 0 0。最左邊的插槽最重要，最右邊的插槽最不重要。 就像十進制數字一樣：1 0 0 0 比 0 1 0 0 要大。 插槽 1 插槽 1 是最不重要的。 當我們有一個 類型選擇器 時，我們會增加這個值。類型就是標籤名稱。如果在規則中有多個類型選擇器，則按照該插槽中存儲的值進行遞增。 例子： p { } /* 0 0 0 1 */ span { } /* 0 0 0 1 */ p span { } /* 0 0 0 2 */ p > span { } /* 0 0 0 2 */ div p > span { } /* 0 0 0 3 */ 插槽 2 第二個插槽的值增加 3 個方面：...