css樣式衝突怎麼辦

醉折花枝作酒筹
發布: 2023-01-07 11:43:25
原創
4436 人瀏覽過

解決方法:1、細化選擇符,將選擇器的描述寫得更精確;2、再寫一次選擇器名稱;3、改變CSS樣式表中的順序;4、主動提升優先級,在需要使用的樣式後加上關鍵字「!important」。

css樣式衝突怎麼辦

本教學操作環境: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中文網其他相關文章!

相關標籤:
css
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!