要有效地覆蓋CSS樣式，請確保選擇器的特異性相等或更高。 2。將您的自定義樣式表放在外部樣式表之後，以利用級聯(lián)訂單； 3。很少使用！只有在無法匹配或調(diào)試特異性時才很少； 4。通過組合.navbar .btn或謹(jǐn)慎使用IDS等選擇器來提高特異性； 5。利用：where（）對於低特異性默認(rèn)值和：IS（）用於較高特異性的分組； 6.避免由於維護(hù)問題和關(guān)注不足而導(dǎo)致的內(nèi)聯(lián)風(fēng)格； 7.使用CSS自定義屬性（變量）進(jìn)行可擴(kuò)展和可維護(hù)的替代，尤其是在主題設(shè)計中；始終優(yōu)先考慮適當(dāng)?shù)奶禺愋院拓?fù)載訂單，以進(jìn)行針對性的安全更改，而不會破壞現(xiàn)有樣式。

當(dāng)您使用現(xiàn)有樣式表工作時，覆蓋CSS樣式是一項(xiàng)常見的任務(wù) - 無論是Bootstrap，第三方庫還是舊版代碼，例如Bootstrap之類的框架。這是有效，安全的方法。

1。了解特異性

CSS根據(jù)特異性應(yīng)用規(guī)則。如果兩個規(guī)則針對同一元素，則具有更高特異性的元素會獲勝。

特異性層次結(jié)構(gòu)（從最低到最高）：

• 類型選擇器（例如， p ， div ）→0,0,1
• 類選擇器，屬性選擇器，偽級（例如， .my-class ， [type="text"] ，： :hover ）→0,1,0
• ID選擇器（例如， #my-id ）→1,0,0
• 內(nèi)聯(lián)樣式（例如， style="..." ）→1,0,0,1
• !important

？要覆蓋樣式，您的選擇器必須具有相等或更高的特異性。

例子：

 / *原始規(guī)則 */
。按鈕 {
  顏色：藍(lán)色；
}

/ *覆蓋：相同的特異性，但必須在 */之後出現(xiàn) */
。按鈕 {
  顏色：紅色；
}

但是如果原件是：

 #header .button {
  顏色：藍(lán)色；
}

然後.button { color: red; }不會覆蓋它：

 #header .button {
  顏色：紅色；
}

2。負(fù)載訂單很重要

當(dāng)特異性相等時，最後一個規(guī)則定義的獲勝。

?正確：

 <link rel =“ stylesheet” href =“ bootstrap.css”>
<link rel =“ stylesheet” href =“ custom.css”> <！ - 您的覆蓋

?錯誤：

 <link rel =“ stylesheet” href =“ custom.css”>
<link rel =“ stylesheet” href =“ bootstrap.css”> <！ -  bootstrap覆蓋了您的樣式 - >

因此，始終將自定義CSS放在外部樣式表之後。

3。使用!important （僅在必要時）

您可以強(qiáng)制使用樣式使用!important ，但這是最後的手段。

 。按鈕 {
  顏色：紅色！重要；
}

??問題!important ：

• 使調(diào)試更加困難
• 打破自然級聯(lián)
• 可能導(dǎo)致特異性戰(zhàn)爭

僅在以下方式時使用它

• 您無法控制特異性（例如，CMS的內(nèi)聯(lián)樣式）
• 您正在快速調(diào)試（稍後刪除）

4。提高選擇器特異性

如果未覆蓋樣式，請使您的選擇者更具體。

而不是：

 .btn {
  背景：綠色；
}

嘗試：

 .navbar .btn {
  背景：綠色；
}

或者

身體.btn {
  背景：綠色；
}

或者，如果需要，請使用ID（儘管避免在CSS中使用ID）：

 #main .btn {
  背景：綠色；
}

5。使用:where()或:is()控制特異性

現(xiàn)代CSS提供:where()和:is()來幫助管理特異性。

• :where()忽略特異性，因此對於重置/基礎(chǔ)樣式很有用。
• :is()在其論點(diǎn)中獲得最高特異性。

例子：

 ：where（.btn）{
  顏色：紅色； / *不會覆蓋普通的.btn規(guī)則 */
}

使用:where()當(dāng)您想要低特異性默認(rèn)值時。

6。使用內(nèi)聯(lián)風(fēng)格（不建議用於大型項(xiàng)目）

內(nèi)聯(lián)風(fēng)格具有很高的優(yōu)先級：

 <按鈕樣式=“顏色：紅色;”>單擊</button>

但是他們很難維持和打破關(guān)注點(diǎn)的分離。

7。利用CSS自定義屬性（變量）

如果控制原始CSS，請使用變量以更容易覆蓋：

 ：根 {
   - 丁頓色：藍(lán)色；
}

。按鈕 {
  顏色：var（ - 按鈕顏色）;
}

然後覆蓋變量：

 .custom-theme {
   - 丁頓 - 色：紅色；
}

這樣可以使事情保持可維護(hù)並避免特異性問題。

快速提示摘要

• ?在外部樣式表之後寫下您的CSS
• ?匹配或擊敗原始規(guī)則的特異性
• ?使用!important僅作為最後的度假勝地
• ?更喜歡基於班級的替代ID或內(nèi)聯(lián)樣式
• ?將CSS變量用於主題或可重複使用的覆蓋

覆蓋CSS不必凌亂。通過良好的特異性控制和適當(dāng)?shù)呢?fù)載順序，您可以進(jìn)行有針對性的更改而不會破壞其他樣式。

以上是如何覆蓋CSS樣式？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！