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)。