---

theme: channing-cyan highlight: a11y-dark

---

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第1天，點選檢視活動詳情。

不要濫用css樣式!important規則

一、理解 !important 與優先順序無關

有的同學稱 css 的樣式優先順序計算的例外規則-!important規則，為 css 樣式優先順序“最高階”， 這其實有點道理，因為從作用結果上看，這似乎符合事實的。不管內聯樣式， 還是百八十巢狀層的樣式選擇器組合，都可以被 !important 覆蓋。

例如下面這個優先順序權重其實已經很高的樣式，會輕易被 !important 作用的樣式覆蓋。

```css .text { color: green !important; }

body #main .box p span { color: red; } ``` 按照下面的這份樣式優先順序權重規則來看，“body #main .box p span{}” 的優先順序權重大約是 0113， 而 ".text{}" 的優先順序權重大約是 0010。

• css 延時優先順序權重規則說明： 一個選擇器的優先順序可以說是由四個部分相加 (分量)，可以認為是個十百千 — 四位數的四個位數：

千位： 如果宣告在 style 的屬性（內聯樣式）則該位得一分。這樣的宣告沒有選擇器，所以它得分總是1000。 百位： 選擇器中包含ID選擇器則該位得一分。 十位： 選擇器中包含類選擇器、屬性選擇器或者偽類則該位得一分。 個位：選擇器中包含元素、偽元素選擇器則該位得一分。

| 選擇器 | 千位 | 百位 | 十位 | 個位 | 優先順序 | |--------------|-----|-----|-----|-----|-------| | body p span | 0 | 0 | 0 | 3 | 0003 | | .box | 0 | 0 | 1 | 0 | 0010 | | #main | 0 | 1 | 0 | 0 | 0100 | | 合計 | 0 | 1 | 1 | 3 | 0113 |

| 選擇器 | 千位 | 百位 | 十位 | 個位 | 優先順序 | |------|-----|-----|-----|-----|-------| | .box | 0 | 0 | 1 | 0 | 0010 | | 合計 | 0 | 0 | 1 | 0 | 0010 |

正如上圖所示，結果很顯然，應用了 ".text{}" 的樣式，文字顏色為 green。 我們要注意，“body #main .box p span{}” 的優先順序權重大約是 0113， 而 ".text{}" 的優先順序權重大約是 0010，前者的優先順序更高，卻應用了後者的樣式， 這是因為 !important 這個例外規則。注意，從技術上講，!important 與優先順序無關， 所以你要算 !important 的優先順序權重是多算？一萬？八千？這沒法算，它是例外規則，與最終的結果直接相關，但是與優先順序無關。

當然，你如果從樣式作用結果的角度理解，認為 !important 具有一個很高的樣式優先順序權重，儘管這個權重值不存在， 但這樣理解問題也不大。但說它是樣式優先順序的例外規則更合適，因為它就是如此設計的。

關於例外規則，這在不合適量化，在某一套計算規則難以算清（難以解釋）的場景下，使用例外規則很有好處。

二、什麼時候可以使用 !important 規則

tips：css 中使用 !important 的合理場景，是去覆蓋糟糕的難以更改的樣式。 注意是覆蓋，而不是一開始寫樣式就使用 !important。覆蓋+難以更改就是我認為的 !important 的合理適用場景。

例如下面的場景：

1.覆蓋內聯樣式

內聯樣式的優先順序權重很高，如果不便於改動原始碼中的樣式，那麼選用 !important 去覆蓋掉原來的內聯樣式是合適的。因為此時，除了改動原始碼，還有什麼合適的辦法可以改動內聯樣式？似乎沒有了吧。然後就是關於“不便改動原始碼”的理解，例如第三方外掛的內聯樣式，這確實不便於改動。如果是自己開發中的專案，那麼改動原始碼可能比起用 !important 去覆蓋更合適。對於一些老舊專案裡面的內聯樣式，這種原始碼是可以動的，但如果你認為“改動原始碼”非常費勁，你也有一點理由去使用 !important，但不太建議。

2.覆蓋優先順序很高的選擇器

除了內聯樣式，還有一種需要使用 !important 的場景，那就是樣式優先順序很高，權重很大的樣式。優先順序很高，權重很大，是啥概念呢？就是除了改原始碼（程式碼），幾乎沒有辦法能改動了。

```