為什麼我的內聯樣式被樣式表覆蓋？

CSS 優先權：為什麼內嵌樣式被覆蓋

在 CSS 中，樣式根據元素規則的優先權應用於元素。當多個規則針對相同元素時，優先順序最高的規則將生效。

在提供的範例中，您有一個內聯樣式，為右側列表格中的 td 元素設定 padding-left: 10px ID。但是，引用樣式表中的樣式將 .rightColumn 類別中的所有元素的邊距和填充設為 0。問題在於引用的樣式表中的樣式具有更高的優先級，導致內聯樣式被覆蓋。

計算特異性

CSS 優先權由規則。特異性是根據以下標準計算的：

1. 內聯樣式聲明為特異性貢獻 1 分 (a = 1)。
2. 選擇器中的每個 ID 貢獻 10 分 (b = n) )。
3. 選擇器中的每個類別或偽類貢獻 1 分 (c = n)。
4. 選擇器中的每個元素或偽元素貢獻 1 分 (d = n)。

例如，具有選擇器.rightColumn * 的規則的特異性為0010 (a = 0, b = 0, c = 1, d = 0)，而具有選擇器td 的規則特異性性為0001（a = 0、b = 0、c = 0、d = 1）。由於 0010 大於 0001，因此引用的樣式表中的規則具有較高的優先權。

解決問題

要解決此問題並套用內聯樣式，您可以兩個選項：

1. 使用! important: 您可以為內嵌樣式新增!important 以強制其更高的重要性。但是，這種方法可能很難維護，如果可能的話應該避免。
2. 增加規則特異性：您可以為內聯樣式添加更具體的選擇器以增加其特異性。例如，您可以為表格儲存格新增類別名，並使用 .rightColumn .myUnpusedTable 等選擇器設定它們的樣式。這樣，內聯樣式的特殊性變成 0011，高於引用樣式表中規則的特殊性 (0010)。

以上是為什麼我的內聯樣式被樣式表覆蓋？的詳細內容。更多資訊請關注PHP中文網其他相關文章！