CSS選擇器是構(gòu)建CSS的基礎(chǔ).在為大型,復(fù)雜嵌套的(x)HTML文檔進(jìn)行樣式定義時,很有可能會遇上針對相同元素在不同結(jié)構(gòu)下的重復(fù)定義的問題,這個問題也是前端開發(fā)人員相對頭痛的問題.
在這種情況 (針對相同元素在不同結(jié)構(gòu)下的重復(fù)定義) 發(fā)生的前提下,瀏覽器在渲染頁面文件時,會按照一定規(guī)則進(jìn)行優(yōu)先級排列,然后根據(jù)這個優(yōu)先級權(quán)重對發(fā)生狀況的元素進(jìn)行處理.
而這個瀏覽器遵循的規(guī)則是什么呢?
讓我們來看一段簡單的HTML代碼:
<body id="content">
<div class="box">
<p class="italic">For Testing 2</p>
<em id="em" class="wrap">For Testing 3</em>
</div>
</body>
這是段相當(dāng)簡單的HTML代碼,但是具有相當(dāng)?shù)拇硇?我們慢慢就能發(fā)現(xiàn)它為什么具有代表性了.
首先我們來加上一點簡單的CSS聲明:
p{ /*1 */
color:pink;
}
p.italic{ /*11 */
color:red;
}
div.box p{ /*12 */
color:black;
}
div p{ /*2 */
color:blue;
}
#content div p{ /*102 */
color:orange;
}
div p.italic{ /*12 */
color:green;
}
body div p{ /*3 */
color:olive;
}
body div p.italic{ /*13 */
color:gray;
}
大家來猜猜看結(jié)果中的"For Testing2"是什么顏色的呢?嗯…不浪費大家眼神了,結(jié)果是orange的,奇怪嗎?有疑問嗎?大家有沒有注意到我在CSS中加入的注釋中的數(shù)字?這是什么呢?這是CSS選擇器特性權(quán)重值.
id選擇器,class類選擇器,HTML標(biāo)簽選擇器,這3種選擇器就是構(gòu)成CSS繼承的組件,瀏覽器在渲染它們的時候是有優(yōu)先權(quán)的.而這個優(yōu)先權(quán)在一定情況下是可以計算出來的.
統(tǒng)計在這個選擇器里面ID選擇器的數(shù)目為a
統(tǒng)計在這個選擇器里面類的選擇器,屬性選擇器和偽類為b
統(tǒng)計在這個選擇器里面的元素名稱數(shù)目為c,其中要忽略偽元素.串聯(lián)三個數(shù)字為a-b-c,得到特征值.
串連這3個數(shù)字就可以得到特征值.
* /* a=0 b=0 c=0 -> 特征值 = 0 */
li/* a=0 b=0 c=1 -> 特征值 = 1 */
ul li /* a=0 b=0 c=2 -> 特征值 = 2 */
ulol li /* a=0 b=0 c=3 -> 特征值 = 3 */
h1 *[rel=up] /* a=0 b=1 c=1 -> 特征值 =11 */
ulol li.red /* a=0 b=1 c=3 -> 特征值 =13 */
li.red.level /* a=0 b=2 c=1 -> 特征值 =21 */
#x34y /* a=1 b=0 c=0 -> 特征值 = 100 */
#s12:not(FOO) /* a=1 b=0 c=1 -> 特征值 = 101 */
這樣就能明白上面代碼中的數(shù)字的含義了.
是不是就這么簡單呢?
應(yīng)該還有耐人尋味的地方.
比如說我給出這樣一組CSS來定義上面的HTML:
p.italic { /* 11 */
color: black;
}
新聞熱點
疑難解答
