“確定應當向一個元素應用哪些值時，用戶代理不僅要考慮繼承，還要考慮聲明的特殊性，另外需要考慮聲明本身的來源。這個過程就稱為層疊。”——《css權威指南》

?

特殊性

內聯樣式	?1,0,0,0
ID	?0,1,0,0
類、屬性選擇、偽類	?0,0,1,0
標簽、偽元素	?0,0,0,1
結合符、通配符	?0,0,0,0

?

　　

?

?

?

1 html>body table tr[id="totals"] td ul >li {color:maroon;}/*0,0,1,7*/ 2 li#answer {color:navy;} /*0,1,0,1 (winner)*/

注：!important 是重要聲明，永遠比非重要聲明優先。

?

繼承

　　大多數框模型屬性（包括外邊距、內邊距、背景和邊框）都不能繼承。

　　繼承的值沒有特殊性，連0特殊性（通配符）都沒有。

　　用戶代理的超鏈接a有默認樣式不會繼承，如需修改要額外寫一個a:link{color:inherit;}覆蓋原有藍色。

demo

1 <style type="text/css"> 2 *{color:gray;} 3 #page{color:blue;} 4 </style> 1 <h1 id="page">This is <em>central line.</em></h1>

注：這個demo也說明了不加區別地使用通配選擇器會引發的繼承問題。

?

?權重和來源

? ? ?5級聲明權重由大到小順序依次為：

讀者的重要聲明

創作人員的重要聲明

創作人員的正常聲明

讀者的正常聲明

用戶代理聲明

　　如果兩個規則的權重、來源和特殊性完全相同，那么后寫的勝出。文檔中包含的規則權重高于導入的規則（@import）。

?　 ?由此，推薦鏈接樣式排序為LVHA（:link,:visited,:hover,:active）。當為同一個屬性設置樣式（如color），以AHLV的順序編寫就不會有懸停和響應的效果，因為鏈接會先找到:link而直接忽視AH。當然，如果使用組合偽類（:visited:hover）就不用擔心這個問題。

?

層疊規則

　　來源>特殊性>聲明順序（主樣式表>導入樣式表）>繼承

?

---

參考資料

《css權威指南》第3章 結構與層疊　

?

轉載于:https://www.cnblogs.com/ssnowy93/p/4225825.html

總結

以上是生活随笔為你收集整理的关于css层叠的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。