- 相關(guān)推薦
詳細解答CSS中相同元素不同結構重復定義的問(wèn)題
CSS選擇器是構建CSS的基礎.在為大型，復雜嵌套的(x)HTML文檔進(jìn)行樣式定義時(shí)，很有可能會(huì )遇上針對相同元素在不同結構下的重復定義的問(wèn)題,這個(gè)問(wèn)題也是前端開(kāi)發(fā)人員相對頭痛的問(wèn)題。
在這種情況 發(fā)生的前提下，瀏覽器在渲染頁(yè)面文件時(shí)，會(huì )按照一定規則進(jìn)行優(yōu)先級排列,然后根據這個(gè)優(yōu)先級權重對發(fā)生狀況的元素進(jìn)行處理。
而這個(gè)瀏覽器遵循的規則是什么呢?下面請看小編為你細細解答。
讓我們來(lái)看一段簡(jiǎn)單的HTML代碼:
<body =>
<div =>
<p =/p>
<em ="em" "wrap"></em>
</div>
</body>
這是段相當簡(jiǎn)單的HTML代碼,但是具有相當的代表性.我們慢慢就能發(fā)現它為什么具有代表性了.
首先我們來(lái)加上一點(diǎn)簡(jiǎn)單的CSS聲明:
{
;
}
{ /* 11 */
;
}
{ /* 12 */
;
}
{ /* 2 */
;
}
{ /* 102 */
;
}
{
;
}
{ /* 3 */
;
}
{ /* 13 */
;
}
大家來(lái)猜猜看結果中的"For Testing2"是什么顏色的呢?嗯...不浪費大家眼神了,結果是的,奇怪嗎?有疑問(wèn)嗎?大家有沒(méi)有注意到我在CSS中加入的注釋中的數字?這是什么呢?這是CSS選擇器特性權重值.
id選擇器,class類(lèi)選擇器,HTML標簽選擇器,這3種選擇器就是構成CSS繼承的組件,瀏覽器在渲染它們的時(shí)候是有優(yōu)先權的.而這個(gè)優(yōu)先權在一定情況下是可以計算出來(lái)的.
1. 統計在這個(gè)選擇器里面ID選擇器的數目為a
2. 統計在這個(gè)選擇器里面類(lèi)的選擇器,屬性選擇器和偽類(lèi)為b
3. 統計在這個(gè)選擇器里面的元素名稱(chēng)數目為c,其中要忽略偽元素.串聯(lián)三個(gè)數字為a-b-c,得到特征值.
串連這3個(gè)數字就可以得到特征值.
* /* a=0 b=0 c=0 -> 特征值 = 0 */
li /* a=0 b=0 c=1 -> 特征值 = 1 */
ul li /* a=0 b=0 c=2 -> 特征值 = 2 */
ul ol+li /* a=0 b=0 c=3 -> 特征值 = 3 */
h1 + *[rel=up] /* a=0 b=1 c=1 -> 特征值 = 11 */
ul ol 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 */
這樣就能明白上面代碼中的數字的含義了.
是不是就這么簡(jiǎn)單呢?
應該還有耐人尋味的地方.
比如說(shuō)我給出這樣一組CSS來(lái)定義上面的HTML:
{
;
}
{ /* 11 */
;
}
{ /* 11 */
;
}
{
}
{ /* 111*/
red
}
{ /* 111 */
green
}
{
gray
}
這里的前3條權重值都是11,后4條聲明的權重值都是111,那我們應該怎么判斷呢?
首先,我們看這條聲明最終定義的是哪個(gè)元素.前3條都是定義這個(gè)元素的,不難從中總結出一條規律:在聲明中聲明了元素的HTML標簽的,權重又可以增加0.5,那么根據上面的例子,權重值就會(huì )變成:
{
;
}
{ /* 11 */
;
}
{ /* 11.5 */
;
}
可以發(fā)現第1條和第3條的權重值還是一樣的,我們試著(zhù)交換一下他們的位置,天哪,它們之間是可以相互覆蓋的.對,那就證明它們是真正的同層(level)聲明.
那同樣的后4條聲明也可以這樣分析了:
{
}
{ /* 111*/
red
}
{ /* 111 */
green
}
{
gray
}
在這里的第1條和第4條權重值相同，第2條和第3條權重值相同.經(jīng)交換實(shí)驗也能發(fā)現這個(gè)數值的正確性，之前的權重計算公式曾經(jīng)出現在Eric的書(shū)中以及W3的CSS3規范草稿中。
【詳細解答CSS中相同元素不同結構重復定義的問(wèn)題】相關(guān)文章：
CSS閉合浮動(dòng)元素教程04-01
英語(yǔ)寫(xiě)作中的重組結構的問(wèn)題03-18
英語(yǔ)寫(xiě)作中的“結構重組”問(wèn)題05-23