CSS樣式的優(yōu)先級

• • CSS樣式的優(yōu)先級
  • 如果多個不同類型的選擇器同時為一個對象設(shè)置樣式，該對象將如何顯示最終樣式呢？以下給出一個簡單的計算方法。對于常規(guī)選擇器，它們都擁有一個優(yōu)先級加權(quán)值

CSS樣式的優(yōu)先級

對于相同CSS起源來說，不同位置的樣式其優(yōu)先級也是不同的。一般來說，行內(nèi)樣式會優(yōu)先于內(nèi)嵌樣式表，內(nèi)部樣式表會優(yōu)先于外部樣式表。而被附加了！important關(guān)鍵字的聲明會擁有最高的優(yōu)先級。
在實際開發(fā)中，如果作者設(shè)計網(wǎng)頁字體顏色為14號黑色字體，而用戶在瀏覽器里利用火狐瀏覽器的插件firebug修改頁面字體為18號字體，那么瀏覽器該如何處理呢？
根據(jù)CSS層疊規(guī)則：作者設(shè)計的樣式能夠覆蓋瀏覽器默認(rèn)設(shè)置的樣式，而用戶在瀏覽器設(shè)置的樣式可以覆蓋作者的樣式。同時,CSS根據(jù)樣式的遠(yuǎn)近關(guān)系來決定層疊樣式的優(yōu)先級：在同等條件下，距離運用對象的距離越近就有較大的優(yōu)先權(quán)，因而行內(nèi)樣式大于內(nèi)部樣式和外部樣式。

如果多個不同類型的選擇器同時為一個對象設(shè)置樣式，該對象將如何顯示最終樣式呢？以下給出一個簡單的計算方法。對于常規(guī)選擇器，它們都擁有一個優(yōu)先級加權(quán)值

• 標(biāo)簽選擇器：優(yōu)先級加權(quán)值為1
• 偽元素或偽對象選擇器：優(yōu)先級加權(quán)值為1
• 類選擇器：優(yōu)先級加權(quán)值為10
• 屬性選擇器：優(yōu)先級加權(quán)值為10
• ID選擇器：優(yōu)先級加權(quán)值為100
• 其他選擇器：優(yōu)先級加權(quán)值為0，如通配選擇器等
  然后，以下面加權(quán)值數(shù)為起點來計算每個樣式中選擇器的總加權(quán)值數(shù)。計算的規(guī)則是：
• 統(tǒng)計選擇器中ID選擇器的個數(shù)，然后乘以100
• 統(tǒng)計選擇器中類選擇器的個數(shù)，然后乘以10
• 統(tǒng)計選擇器中的標(biāo)簽選擇器的個數(shù)，然后乘以1

以此方法類推，最后把所喲有加權(quán)值數(shù)相加，即可得到當(dāng)前選擇器的總加權(quán)值，最后根據(jù)加權(quán)值來決定哪個樣式的優(yōu)先級大
對于由多個選擇器組合而成的復(fù)合選擇器，首先分別計算每個組成選擇器的加權(quán)值，接著相加得出當(dāng)前選擇器的總分，最后根據(jù)選擇器的分值大小，分值越高則優(yōu)先級越高，那么就將應(yīng)用它所設(shè)置的樣式，如果分值相同，則根據(jù)位置關(guān)系來判斷，越靠越近對象的樣式就擁有越高的優(yōu)先級。

h3{color: #ff7300;} /*加權(quán)值=1分 */.f14{font-size: 14px;} /*加權(quán)值=10分 */#head{width: 960px;} /*加權(quán)值=100分 */h3 .f14{font-weight: bold;} /*加權(quán)值=1分+10分=11分 */#head h2{border: 1px solid #ff73;} /*加權(quán)值=100分+1分=101分 */div p{padding: 0 10px;} /*加權(quán)值=1分+1分=2分 */div #head{margin: 0 auto;} /*加權(quán)值=1分+100分=101分 */#head h2 span{float: right;} /*加權(quán)值=100分+1分+1分=102分 */#head .f14 em{float: right;} /*加權(quán)值=100分+10分+1分=111分 */#head .f14 span em{float: right;} /*加權(quán)值=100分+10分+1分+1分=112分 */#head div h2 .f12 span em{color: #000;} /*加權(quán)值=100分+1分+1分+10分+1分+1分=114分 */

總結(jié)

以上是生活随笔為你收集整理的【CSS】CSS样式的优先级的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。