CSS繼承性之深入剖析(3)_CSS教程

教程Tag：暫無(wú)Tag,歡迎添加,賺取U幣!

　　
　　CSS繼續(xù)性在應(yīng)用中存在，那么在樣式表中可能會(huì)有些讀者搞不清，多個(gè)樣式表同時(shí)應(yīng)用到一個(gè)元素對(duì)象上會(huì)發(fā)生什么情形呢？先舉個(gè)簡(jiǎn)單的例子，請(qǐng)運(yùn)行下面的代碼：

代碼調(diào)試框 [www.hl5o.cn]

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　我們會(huì)看到運(yùn)行的效果：因?yàn)檫x擇符h1和.aaa都匹配上面的h1元素，那么到底瀏覽器會(huì)應(yīng)用哪一個(gè)呢？通過(guò)在瀏覽器中觀(guān)察，我們發(fā)現(xiàn)這段文字應(yīng)用了.aaa這個(gè)樣式，所以它顯示的是紅色。這是因?yàn)閮蓷l規(guī)則的非凡性不一樣，CSS規(guī)則必須這樣進(jìn)行處理。而字體的大小，卻是h1默認(rèn)的大小。

　　樣式表中的非凡性描述了不同規(guī)則的相對(duì)權(quán)重，它的基本規(guī)則是：

示例代碼 [www.hl5o.cn]

　　統(tǒng)計(jì)選擇符中的ID屬性個(gè)數(shù)。
　　統(tǒng)計(jì)選擇符中的CLASS屬性個(gè)數(shù)。
　　統(tǒng)計(jì)選擇符中的HTML標(biāo)記名格式。

　　最后，按正確的順序?qū)懗鋈齻€(gè)數(shù)字，不要加空格或逗號(hào)，得到一個(gè)三位數(shù)。( 注重，你需要將數(shù)字轉(zhuǎn)換成一個(gè)以三個(gè)數(shù)字結(jié)尾的更大的數(shù))。相應(yīng)于選擇符的最終數(shù)字列表可以很輕易確定較高數(shù)字特性凌駕于較低數(shù)字的。

　　以下是一個(gè)按特性分類(lèi)的選擇符的列表：

示例代碼 [www.hl5o.cn]

　　H1 {color:blue;} 特性值為：1
　　P EM {color:purple;} 特性值為：2
　　.apple {red;} 特性值為：10
　　P.bright {color:yellow;} 特性值為：11
　　P.bright EM.dark {color:brown;} 特性值為：22
　　#id316 {color:yellow} 特性值為：100

　　從上表我們可以看出#id316具有更高的非凡性，因而它有更高的權(quán)重。當(dāng)有多個(gè)規(guī)則都能應(yīng)用于同一個(gè)元素時(shí)，權(quán)重越高的樣式將被優(yōu)先采用。

　　關(guān)于優(yōu)先權(quán)的問(wèn)題，請(qǐng)參考http://www.hl5o.cn專(zhuān)門(mén)介紹的文章。相信你會(huì)有更多的收獲.