specificity

了解 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 個方面：...

了解CSS層疊的意義及其重要性 層疊是CSS的一個基本概念。畢竟，它在名字中就有了，CSS的第一個C - Cascading Style Sheets（層疊樣式表），它一定是一件重要的事情。 它代表什麼意思？ 層疊是指確定應用於頁面上每個元素的屬性的過程或算法。 試圖從定義在各個位置的CSS規則列表中匯總。 它考慮到了： 特定性 重要性 繼承 檔案中的順序 它還負責解決衝突。 對於應用於同一元素的相同屬性的兩個或更多競爭CSS規則，需要根據CSS規範進行進一步處理，以確定應該應用哪個規則。 即使您只有一個CSS文件在頁面上加載，仍然有其他CSS會參與到此過程中。我們有瀏覽器（user agent）的CSS。瀏覽器有一套預設規則，各個瀏覽器之間都不相同。 然後進行您的CSS。 然後瀏覽器應用任何用戶樣式表，這可能也是由瀏覽器擴展應用的。 所有這些規則在渲染頁面時都會參與其中。