如何使用具有更高特異性的新 CSS 檔案覆蓋網站的 CSS？

如何使用新的 CSS 檔案覆蓋網站的 CSS 檔案？

挑戰：

您有一個網站具有多個 CSS 文件，但您無法存取原始程式碼。您的目標是建立一個新的 CSS 檔案來覆蓋現有樣式，而無需修改 index.html 檔案。

解決方案：

了解CSS 特異性:

要覆蓋現有樣式，您需要了解CSS 特異性的概念。特異性根據所使用的選擇器決定將哪些樣式套用於元素。它的計算方式是不同選擇器類型（內聯、ID、類別、元素）的計數的串聯。

使用更具體的選擇器：

確保您自己的選擇器CSS 檔案優先，使用比目前CSS 檔案中的選擇器具有更高特異性的選擇器。例如，像“.myClass”這樣的選擇器具有 0/0/1/0 的特異性，並且會覆寫像“div”這樣具有 0/0/0/1 的特異性的選擇器。

應用特異性：

想像以下場景：

• currentCSS1.css 有一個body 規則（特異性：0/0/ 0/1）
• currentCSS2.css 有一個.myClass 規則（特異性：0/0/1/0）
• newCSS4.css 有一個.myClass 規則（特異性：0/ 0/2/0）

基於CSS 特異性規則，newCSS4.css 中定義的樣式將覆蓋.myClass 類元素的currentCSS1.css 和currentCSS2.css 中的樣式。

注意與 !important:

雖然使用 !important 可以強制樣式優先，但通常不建議將其用於網站範圍的 CSS。僅將其用於特定於頁面的 CSS 或覆蓋外部 CSS。

計算特異性：

請參考以下層次結構來計算特異性：

• 內聯(1|0|0| 0)
• ID (0|1|0|0)
• 類別(0|0|1|0)
• 元素(0|0|0|1)

左邊最大的數字優先。

範例：

假設您目前的CSS 檔案具有以下規則：

<code class="css">body { margin: 0; }
#header { background: blue; }</code>

要使用新的CSS 檔案覆寫這些規則，您可以使用以下選擇器：

<code class="css">#header.myClass {
  margin: 1em;
  background: red;
}</code>

選擇器#header.myClass具有0/1/1/1 的特異性，它會覆蓋目前CSS 檔案中的兩個規則。

以上是如何使用具有更高特異性的新 CSS 檔案覆蓋網站的 CSS？的詳細內容。更多資訊請關注PHP中文網其他相關文章！