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

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

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

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

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

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

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

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样式的优先级的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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