“確定應(yīng)當(dāng)向一個(gè)元素應(yīng)用哪些值時(shí)，用戶代理不僅要考慮繼承，還要考慮聲明的特殊性，另外需要考慮聲明本身的來(lái)源。這個(gè)過(guò)程就稱為層疊。”——《css權(quán)威指南》

?

特殊性

內(nèi)聯(lián)樣式	?1,0,0,0
ID	?0,1,0,0
類、屬性選擇、偽類	?0,0,1,0
標(biāo)簽、偽元素	?0,0,0,1
結(jié)合符、通配符	?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 是重要聲明，永遠(yuǎn)比非重要聲明優(yōu)先。

?

繼承

　　大多數(shù)框模型屬性（包括外邊距、內(nèi)邊距、背景和邊框）都不能繼承。

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

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

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>

注：這個(gè)demo也說(shuō)明了不加區(qū)別地使用通配選擇器會(huì)引發(fā)的繼承問(wèn)題。

?

?權(quán)重和來(lái)源

? ? ?5級(jí)聲明權(quán)重由大到小順序依次為：

讀者的重要聲明

創(chuàng)作人員的重要聲明

創(chuàng)作人員的正常聲明

讀者的正常聲明

用戶代理聲明

　　如果兩個(gè)規(guī)則的權(quán)重、來(lái)源和特殊性完全相同，那么后寫的勝出。文檔中包含的規(guī)則權(quán)重高于導(dǎo)入的規(guī)則（@import）。

?　 ?由此，推薦鏈接樣式排序?yàn)長(zhǎng)VHA（:link,:visited,:hover,:active）。當(dāng)為同一個(gè)屬性設(shè)置樣式（如color），以AHLV的順序編寫就不會(huì)有懸停和響應(yīng)的效果，因?yàn)殒溄訒?huì)先找到:link而直接忽視AH。當(dāng)然，如果使用組合偽類（:visited:hover）就不用擔(dān)心這個(gè)問(wèn)題。

?

層疊規(guī)則

　　來(lái)源>特殊性>聲明順序（主樣式表>導(dǎo)入樣式表）>繼承

?

---

參考資料

《css權(quán)威指南》第3章 結(jié)構(gòu)與層疊　

?

轉(zhuǎn)載于:https://www.cnblogs.com/ssnowy93/p/4225825.html

總結(jié)

以上是生活随笔為你收集整理的关于css层叠的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。