CSS的優(yōu)先權(quán)問題 考慮CSS的繼承與層疊
來源:程序員人生 發(fā)布時間:2013-12-08 04:11:24 閱讀次數(shù):3341次
建站學(xué)院文檔 CSS2.1 中規(guī)定了關(guān)于 CSS 規(guī)則 Specificity(特異性)的計算方式,用一個四位的數(shù)字串(注:CSS2 中是用三位)來表示,最后以 Specificity 的高低判斷 CSS 的優(yōu)先權(quán)。
Specificity 具體的計算規(guī)則:
1.元素的 style 樣式屬性,加 1,0,0,0。
2.每個 ID 選擇符(#id),加 0,1,0,0。
3.每個 class 選擇符(.class)、每個屬性選擇符(例 [attr=”"] )、每個偽類(例 :hover),加 0,0,1,0。
4.每個元素或偽元素(例 :firstchild)等,加 0,0,0,1。
5.其他選擇符(例 全局選擇符 *,子選擇符 >),加 0,0,0,0。
最后逐位相加數(shù)字串,得到最終的 Specificity 值,按照從左到右的順序逐位比較。除了 Specificity 還有一些其他規(guī)則:
6.!important 聲明的規(guī)則高于一切,如果 !important 聲明沖突,則比較優(yōu)先權(quán)。
7.如果優(yōu)先權(quán)一樣,則按源碼中“后來者居上”的原則。
8.由繼承而得到的樣式屬性不參與 specificity 的計算,低于一切其他規(guī)則(例 全局選擇符 * )。
范例分析:
以下為引用的內(nèi)容: h1 {color: red;} /* 只有一個普通元素加成,結(jié)果是 0,0,0,1 */
body h1 {color: green;} /* 兩個普通元素加成,結(jié)果是 0,0,0,2 */ /*0,0,0,1 小于 0,0,0,2 ,后者勝出*/
h2.grape {color: purple;} /* 一個普通元素、一個class選擇符加成,結(jié)果是 0,0,1,1*/
h2 {color: silver;} /*一個普通元素,結(jié)果是 0,0,0,1 */ /*0,0,1,1 大于 0,0,0,1 ,前者勝出*/
html > body table tr[id=”totals”] td ul > li {color: maroon;} /* 7個普通元素、一個屬性選擇符、兩個其他選擇符(子選擇符 >),結(jié)果是0,0,1,7 */
li#answer {color: navy;} /* 一個ID選擇符,一個普通選擇符,結(jié)果是0,1,0,1 */ /*0,0,1,7 小于 0,1,0,1,后者勝出*/ |
CSS 優(yōu)先權(quán)是比較重要的概念,尤其在維護(hù)龐大的 CSS 樣式時,就顯得尤為重要了,優(yōu)先權(quán)其實會涉及到很多繼承的問題。
本文概括的講述了優(yōu)先權(quán)的相關(guān)知識。在實際開發(fā)中,需要注意經(jīng)驗的總結(jié)與記憶。只有理解與形象的東西,才能更好的吸收與應(yīng)用。
生活不易,碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈