- 相關推薦
詳細解答CSS中相同元素不同結(jié)構(gòu)重復定義的問題
CSS選擇器是構(gòu)建CSS的基礎.在為大型，復雜嵌套的(x)HTML文檔進行樣式定義時，很有可能會遇上針對相同元素在不同結(jié)構(gòu)下的重復定義的問題,這個問題也是前端開發(fā)人員相對頭痛的問題。
在這種情況 發(fā)生的前提下，瀏覽器在渲染頁面文件時，會按照一定規(guī)則進行優(yōu)先級排列,然后根據(jù)這個優(yōu)先級權(quán)重對發(fā)生狀況的元素進行處理。
而這個瀏覽器遵循的規(guī)則是什么呢?下面請看小編為你細細解答。
讓我們來看一段簡單的HTML代碼:
<body =>
<div =>
<p =/p>
<em ="em" "wrap"></em>
</div>
</body>
這是段相當簡單的HTML代碼,但是具有相當?shù)拇硇?我們慢慢就能發(fā)現(xiàn)它為什么具有代表性了.
首先我們來加上一點簡單的CSS聲明:
{
;
}
{ /* 11 */
;
}
{ /* 12 */
;
}
{ /* 2 */
;
}
{ /* 102 */
;
}
{
;
}
{ /* 3 */
;
}
{ /* 13 */
;
}
大家來猜猜看結(jié)果中的"For Testing2"是什么顏色的呢?嗯...不浪費大家眼神了,結(jié)果是的,奇怪嗎?有疑問嗎?大家有沒有注意到我在CSS中加入的注釋中的數(shù)字?這是什么呢?這是CSS選擇器特性權(quán)重值.
id選擇器,class類選擇器,HTML標簽選擇器,這3種選擇器就是構(gòu)成CSS繼承的組件,瀏覽器在渲染它們的時候是有優(yōu)先權(quán)的.而這個優(yōu)先權(quán)在一定情況下是可以計算出來的.
1. 統(tǒng)計在這個選擇器里面ID選擇器的數(shù)目為a
2. 統(tǒng)計在這個選擇器里面類的選擇器,屬性選擇器和偽類為b
3. 統(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 */
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 */
這樣就能明白上面代碼中的數(shù)字的含義了.
是不是就這么簡單呢?
應該還有耐人尋味的地方.
比如說我給出這樣一組CSS來定義上面的HTML:
{
;
}
{ /* 11 */
;
}
{ /* 11 */
;
}
{
}
{ /* 111*/
red
}
{ /* 111 */
green
}
{
gray
}
這里的前3條權(quán)重值都是11,后4條聲明的權(quán)重值都是111,那我們應該怎么判斷呢?
首先,我們看這條聲明最終定義的是哪個元素.前3條都是定義這個元素的,不難從中總結(jié)出一條規(guī)律:在聲明中聲明了元素的HTML標簽的,權(quán)重又可以增加0.5,那么根據(jù)上面的例子,權(quán)重值就會變成:
{
;
}
{ /* 11 */
;
}
{ /* 11.5 */
;
}
可以發(fā)現(xiàn)第1條和第3條的權(quán)重值還是一樣的,我們試著交換一下他們的位置,天哪,它們之間是可以相互覆蓋的.對,那就證明它們是真正的同層(level)聲明.
那同樣的后4條聲明也可以這樣分析了:
{
}
{ /* 111*/
red
}
{ /* 111 */
green
}
{
gray
}
在這里的第1條和第4條權(quán)重值相同，第2條和第3條權(quán)重值相同.經(jīng)交換實驗也能發(fā)現(xiàn)這個數(shù)值的正確性，之前的權(quán)重計算公式曾經(jīng)出現(xiàn)在Eric的書中以及W3的CSS3規(guī)范草稿中。
【詳細解答CSS中相同元素不同結(jié)構(gòu)重復定義的問題】相關文章：
CSS閉合浮動元素教程04-01
對茶文化的問題與解答11-02
催乳師工作中的實用問題解答02-27
2017自主招生中四大問題解答06-05
用友U8應用中的常見問題解答07-19
PHP中關于類的定義04-01
美國CPA的相關問題及其解答03-28
cadence布線問題解答「精選」06-05
司法考試相關問題與解答03-31