解決方法:1、細化選擇符,將選擇器的描述寫得更精確;2、再寫一次選擇器名稱;3、改變CSS樣式表中的順序;4、主動提升優先級,在需要使用的樣式後加上關鍵字「!important」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
1. 細化選擇子
#透過使用組合器(Combinator)將選擇器的描述寫得更精確,例如下述程式碼片段,如果想為.cellphones中的.apple增加樣式,只使用.apple,勢必會對.fruit中的.apple也造成影響。
可以使用後代組合器(Descendant Combinator)或子代組合器(Child Combinator)這種更為精確的描述。描述越精確,優先順序越高,優先順序較高的描述會涵蓋優先順序較低的描述。
/* 后代组合器:所有后代节点 */ .cellphones .apple { border: 1px solid black; } /* 更加精确的后代组合器 */ body .cellphones .apple { border: 1px solid blue; } /* 子代组合器:直接子节点 */ .cellphones > .apple { border: 1px solid red; }
如果給.apple按順序加上上述全部樣式,最終,邊框將呈現藍色。
詳細的優先權規則請參考CSS 優先權
2. 再寫一次選擇器名稱
本質上是上一個情況的特例。例如對於.apple,新增如下樣式:
.cellphones > .apple.apple { border: 1px solid purple; } .cellphones > .apple { border: 1px solid red; }
最終,邊框將呈現紫色。
3. 改變CSS樣式表中的順序
對於相同類型選擇器指定的樣式,在CSS檔案中的順序靠後的樣式會覆蓋之前的樣式。例如對於下述程式碼中的div元素,瀏覽器渲染的結果會是紅色的:
.blackBorder { border: 1px solid black; } .redBorder { border: 1px solid red; }
需要注意的是,儘管在HTML檔案中.blackBorder出現在.redBorder後,但優先順序的判斷是根據他們在CSS檔案中的順序。也就是說,CSS檔案中較為靠後的.redBorder才會被採用。
4. 主動提升優先權(不建議)
還有一個簡單粗暴但不建議的辦法,就是在需要使用的樣式後加上關鍵字!important可以將樣式優先權提到極高。例如:
.greenBorder { border: 1px solid green !important; } .redBorder { border: 1px solid red; }
對於上述程式碼,邊框將顯示為綠色。
使用 !important 是一個非常不好的習慣,會破壞樣式表中固有的級聯規則,使得調試變得非常困難!
推薦學習:css影片教學
#以上是css樣式衝突怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章!