首頁 > 開發者 > JavaScript
CSS特異性（CSS Specificity）的細節之CSS樣式權重的計算與理解（CSS樣式覆蓋規則），cssspecificity
本篇講解CSS特異性（CSS Specificity）的細節，也就是CSS樣式選取器的權重計算
通過計算選取器的權重（weight）最終決定哪個選取器將獲得優先權去覆蓋其他選取器的樣式設定，即“優先原則（priority rules）”！
首先，我們來一個簡單的例子：
<body> <ul id="summer-drinks"> <li class="favorite">First section</li> <li>Second section</li> <li>Third section</li> </ul></body>View Code設定樣式：
<style> ul#summer-drinks li { font-weight: normal; font-size: 12px; color: black; } .favorite { color: red; font-weight: bold; }</style>View Code：
然後查看效果我們發現，效果並不是我們想要的，我們favorite列文本文字並沒有變紅和加粗，這兒肯定出了一些意想不到的事，注意下面我們可以知道，我們的麻煩出現在這兒：
ul#summer-drinks li { font-weight: normal; font-size: 12px; color: black; }View Code兩個不同的CSS選取器同時設定了文字的color和font-weight，而僅僅font-size只聲明了一次，因此我們可以很清晰的看到效果。對於“衝突”，瀏覽器必須做出選擇，哪一個選取器樣式最終產生效果。也就引出了以下一系列標準特異性（即權重優先順序）的規則
計算CSS樣式選取器優先順序的“值”
先看看實際選取器腳色扮演優先順序：
在這裡我們形象的設定：
1、如果元素擁有內聯樣式（inline style），那麼給內聯樣式1000點 例如：<h1> 2、對於每個ID，我們給他0100點 例如：#div
3、對於每個Class、偽類（pseudo-classes）或屬性選取器，我們給他0010點 例如：.classes，[attributes]和:hover，:focus
4、對於每個具體標籤元素引用和虛擬元素（pseudo-elements），我們給他0001點 例如：:before和:after
這裡數字你可以看成一般的數字計數什麼的，例如0100，就可以看做100，只是下面運用形象點而是用0100
下面舉例說明：
例一：
ul#nav li.active a
例二：
body.ie7 .col_3 h2~h2
例三：
#footer *:not(nav) li
注意：“ :not() ”自身沒有權重值（這裡權重值是指上面的數點，像0100），僅括弧內的有權重值！
例四：
<li> ul > li ul li ol li:first-letter
例六：
A：
div#demo{background-image:url(n.gif);}
B：
div[id="demo"]{background-image:url(n.gif)}
代碼：
<!DOCTYPE html><html> <head> <style> div{ height:100px; width:100px; } div#demo{ background:red; } div[id="demo"]{ background:green; } </style> </head> <body> <div id="demo"></div> </body></html>View Code ：
這裡可以驗證出：A情況中的權重比B中的權重高一點，也就是ID選取器的權重比屬性選取器權重高
重點注意：
1、*選取器沒有權重值，當然我們可以形象設定他的權重值為0000點
2、我們設定虛擬元素（例如：“ :first-line ”）權重值為0001點，而設定偽類權重值為0010點
3、偽類中“ :not() ”本身不計權重值，而在其括弧裡的則相應設定權重值
4、“ !important ”比較進階，權重比內聯樣式的權重還高，他的樣式設定可以覆蓋內聯樣式的樣式，當然了，我們可以用相同的“ !important ”去設定不同樣式來 覆蓋先前的“ !important ”設定的樣式（這裡需要知道，同一樣式檔案中，相同選取器多次聲明樣式時，是後聲明的樣式也就是最新聲明的覆蓋前面聲明的樣式），這裡我們也可以形象的設定“ !important ”的權重值為10000點
5、ID選取器權重比屬性選取器權重高一點 例：如上例六
參考文章：
Chris Coyier的Specifics on CSS Specificity
Vitaly Friedman的CSS Specificity: Things You Should Know
至此，CSS選取器設定樣式的優先順序計算也就結束了，如果寫的不好大家可以在評論中補充~~
謝謝~~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
