成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

理解層疊樣式表中的層疊機制，精準(zhǔn)掌握元素樣式

0x584a / 371人閱讀

摘要：問題在寫時，有時候會遇到瀏覽器中顯示的樣式和自己的預(yù)期不符合的情況，這是因為沒有理解的層疊機制。清楚地理解了他這三大法寶，我們就能精準(zhǔn)的預(yù)測出每個元素在瀏覽器中的樣式了。

問題：

在寫CSS時，有時候會遇到瀏覽器中顯示的樣式和自己的預(yù)期不符合的情況，這是因為沒有理解CSS的層疊機制。
例如文檔中有一個p元素,用內(nèi)聯(lián)樣式為他設(shè)置了顏色：

2016年10月20日

在CSS中又用不同的方式給他指定了顏色：

p {
    color: #000;
  }
.date {
    color: #FFF;
  }

這三個規(guī)則都要控制p元素的顏色，而p元素肯定只能有一種顏色，那么他會選擇哪一種呢？

層疊：

層疊就是用來處理這種沖突的一種機制。
他有三大法寶來幫助他完成這個任務(wù)：重要度、特殊性、先后順序。

一.重要度

首先決定使用規(guī)則的是重要度，層疊采用的重要度次序（序號越小越重要）：

1.標(biāo)有！important的用戶樣式
2.標(biāo)有！important的作者樣式
3.作者樣式
4.用戶樣式
5.瀏覽器/用戶代理應(yīng)用的樣式

重要度更高的規(guī)則會覆蓋重要度較低的規(guī)則。

二、特殊性

那如果重要度相同呢？像上面的例子那樣，都是普通的作者樣式，他會怎么處理呢？
這時候就要用到另外一個概念，特殊性。更特殊的規(guī)則會成為優(yōu)勝方。
與樣式來源不同，CSS選擇器多種多樣，并且可以疊加使用，添加樣式的方法也很多（內(nèi)聯(lián)，外部引用，繼承）。所以，為了更好的衡量一個規(guī)則的特殊性，層疊機制為每個選擇器和方法都分配了一個數(shù)值：

行內(nèi)樣式：1000  
ID選擇器：100
類、偽類、屬性選擇器：10
類型選擇器、偽元素選擇器：1
繼承：0

每個規(guī)則的特殊性就是他包含的選擇器和方式對應(yīng)的值之和。所以在上面的例子中，p元素的顏色會是 #999.

不管規(guī)則多么復(fù)雜，這個法寶都能勝任。
例如：


    

        
2016年10月20日

        
13:20:00

如果CSS中是這樣寫的，表示時間的p元素的顏色會是#000，因為‘#calendar p’的特殊性為100+1=101，而‘#time’的特殊性為100，雖然‘#time’離目標(biāo)元素更近，但這并不是評判標(biāo)準(zhǔn)。

#calendar p{
    color: #000;
}
#time {
    color: #FFF;
}

第二個規(guī)則如果換成

.date #time {
    color: #FFF;
}

"13:20:00"的顏色會是#FFF，因為‘.date #time’的特殊性為10+100=110.

三、先后順序

那么如果換成這樣呢？

#calendar p{
    color: #000;
}
p#time {
    color: #FFF;
}

這兩個規(guī)則的特殊性相同了。這個時候就要用到第三個法寶，先后順序。
因為瀏覽器解析CSS文檔時是自上而下的，所以當(dāng)前兩個法寶都無法分清勝負(fù)時，靠后面的規(guī)則會取勝，所以它的顏色會是#FFF

總結(jié)：

有了這三個法寶，層疊機制就可以處理一切沖突了。清楚地理解了他這三大法寶，我們就能精準(zhǔn)的預(yù)測出每個元素在瀏覽器中的樣式了。

附上一個用于測試的小鏈接：
https://jsfiddle.net/mamengyi...

參考：《精通CSS》

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111658.html

相關(guān)文章

  • CSS學(xué)習(xí)筆記(四) CSS優(yōu)先級

    摘要：為了解決沖突，確定哪條規(guī)則勝出并最終被應(yīng)用，提供了三種機制繼承層疊和特指。整個檢查更新過程結(jié)束后，再將每個標(biāo)簽以最終設(shè)定的樣式顯示出來。層疊規(guī)則四順序決定權(quán)重。規(guī)則三設(shè)定的樣式勝過繼承的樣式，此時不用考慮特指度即顯式設(shè)定優(yōu)先。 為了解決沖突，確定哪條規(guī)則勝出并最終被應(yīng)用，CSS提供了三種機制：繼承、層疊和特指。 1.繼承 CSS 中的祖先元素會向后代傳遞一樣?xùn)|西：CSS屬性...

    高勝山 評論0 收藏0

  • 不知道層疊，別說你懂CSS

    摘要：知道存在是很有用的，這樣當(dāng)你在別人的代碼中遇到它時，你就知道它是什么了。如上面所示的示例所示，元素選擇器具有很低的特殊性。類選擇器具有更高特殊性，所以將戰(zhàn)勝元素選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。 在實際的工作中，我們可能還有些疑惑，當(dāng)有多個選擇器作用在一個元素上時，哪個規(guī)則最終會應(yīng)用到元素上？其實這是通過層疊機制來控制的，這也和樣式繼承(元素從其父元...

    izhuhaodev 評論0 收藏0

  • CSS學(xué)習(xí)摘要-層疊和繼承

    摘要：類選擇器具有更高的專用性，所以將戰(zhàn)勝元素選擇器。個位在整個選擇器中每包含一個元素選擇器或偽元素就在該列中加分。選擇器六明顯地輸給了了五，其專用性值為和它在鏈中少了一個元素選擇器。當(dāng)有多個選擇器作用在一個元素上時，哪個規(guī)則最終會應(yīng)用到元素上？ 其實這是通過層疊機制來控制的，這也和樣式繼承(元素從其父元素那里獲得屬性值)有關(guān)。 元素的最終樣式可以在多個地方定義，它們以復(fù)雜的形式相互影響。這些復(fù)雜...

    mating 評論0 收藏0

  • CSS規(guī)則的繼承與層疊

    摘要：我們知道字體屬性在任意時刻都只能應(yīng)用一種設(shè)定那此時該應(yīng)用哪種字體呢為解決類似的沖突確定哪條規(guī)則勝出并最終被應(yīng)用提供了三種機制繼承層疊和特指。層疊規(guī)則層疊規(guī)則一找到應(yīng)用給每個元素和屬性的所有聲明。層疊規(guī)則五設(shè)定的永遠(yuǎn)大于繼承的。 在一個較大的樣式表中,可能會有很多條規(guī)則都選擇同一個元素的同一個屬性。比 如,一個帶有類屬性的段落,可能會被一條以標(biāo)簽名作選擇符的規(guī)則選中并指定一 種字體,而另...

    snowell 評論0 收藏0

  • CSS 入門指南：（1）工作原理

    摘要：例如如果想讓和的文本都變成藍(lán)色粗體可以這么寫也可以這么寫分組選擇符以逗號作為分隔符第三種方法多條規(guī)則應(yīng)用給一個選擇符。上下文選擇符以空格作為分隔符特殊的上下文選擇符子選擇符格式如下標(biāo)簽標(biāo)簽標(biāo)簽必須是標(biāo)簽的父元素，不能是其它的祖先元素。 css 工作原理 每個html元素都有一組樣式屬性，可以通過css來設(shè)定。當(dāng)html元素的同一個樣式屬性有多種樣式值的時候，css就要靠層疊機智來決定最...

    RobinQu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<