開發中可能會遇到這樣的問題，在兩個css選擇器都能定位到某元素，但是瀏覽器按照哪個選擇器定義的樣式來渲染元素呢。這就是涉及到css選擇器優先順序的問題。
css2.1的規範是這樣描述的：以上四個數字按照a-b-c-d組合起來，便構成了選擇器的優先順序。1.如果宣告來自「style」屬性，而不是帶有選擇器的規則，則記為1，都則記為0（=a）,這種樣式被稱之為內聯樣式，因為這些樣式沒有選擇器，因為記為a=1,b=0,c=0,d=0
2.選擇器中id選擇器的個數（=b）
3.選擇器中類原則器的個數、屬性選擇器的個數以及偽類選擇器的個數（=c）
4.選擇器中標籤選擇器的個數以及偽元素的個數（=d）
在最新的selectors level3 規範中是這樣描述的：將以上三個數字按照a-b-c組合起來，構成選擇器的優先順序。1.計算選擇器中id選擇器的個數（=a）
2.計算選擇器中類選擇器的個數、屬性選擇器以及偽類選擇器的個數（=c）
3.計算選擇器中標籤選擇器的個數以及偽元素的個數（=d）
4.忽略通用選擇器*
上述篇幅描述了規範中是如何對css優先順序進行的定義。對於如何解讀css的優先順序網上給出了不同的方法。有的使用a*1000+b*100+c*10+d。這種方式值得商榷。切忌不要使用這種方式進行計算，雖然這樣計算可能在目前我們所遇到的需要計算選擇器優先順序的場景中不會出錯。下面解釋一下如何來進行計算以及為什麼在我們遇到的場景中使用上面十進位制的方式計算優先順序幾乎不會出錯。
瀏覽器引擎是如何計算css優先順序的
unsigned cssselector::specificity() const
return total;
}inline
unsigned cssselector::specificityforoneselector() const
assert_not_reached();
return
0;}
webkit中對於！important的處理是這樣的，具有!important的樣式規則優先順序大於!important的規則，只有在同時具有!important的時候才會比較css整體優先順序。
因此得出webkit中的優先級別：
!important>inline>id>class>tag
int32_t nscssselector::calcweightwithoutnegations() const
nsatomlist* list = midlist;
while (nullptr != list)
list = mclasslist;
#ifdef moz_xul
// xul tree pseudo-elements abuse mclasslist to store some private
// data; ignore that.
if (pseudotype() == nscsspseudoelements::epseudo_xultree)
#endif
while (nullptr != list)
// fixme (bug 561154): this is incorrect for :-moz-any(), which isn't
// really a pseudo-class. in order to handle :-moz-any() correctly,
// we need to compute specificity after we match, based on which
// option we matched with (and thus also need to try the
// highest-specificity options first).
nspseudoclasslist *plist = mpseudoclasslist;
while (nullptr != plist)
nsattrselector* attr = mattrlist;
while (nullptr != attr)
return weight;
} int32_t nscssselector::calcweight() const
return weight;
}
2.優先順序計算總結
- 優先順序計算可能會存在溢位問題
- 優先順序計算不包括內聯樣式以及!important的情況
- 優先順序計算中只有同一類別才具有可比性
3.為什麼如果按照十進位制的權重進行相加求和計算優先順序的過程一般不會出錯
如果採用這種計算方法的話，如果同一級別的選擇器數目在10個以內是不會出現問題的（一般的css選擇器語句不會超過10個），一旦選擇器數目大於10個的話這樣的計算方式計算出來的優先順序就會出現問題。例如：
a的選擇器語句對應的級別：a:0 b:1 c:0 d:0
b的選擇器語句對應的級別：a:0 b:0 c:11 d:0
如果按照上面的計算方式計算出來的權重分別為：a:100,b:110,這樣的話a的權重就會小於b的權重。事實上因為a中存在乙個id選擇器，b中僅存在11個類選擇器，所以a的優先級別是大於b的優先順序級別的。很顯然單純的使用十進位制權重對css級別進行解讀是行不通的，切忌不要這樣使用。
4.正確的解讀css優先順序
css優先順序的比較僅限於同級別的選擇器進行比較。比如：
a選擇器語句對應的級別為: a:0 b:1 c:1 d:2
b選擇器語句對應的級別為: a:0 b:0 c:2 d:3
以上兩個選擇器語句的級別在比較的時候發現a中id選擇器級別（對應的是b）是1，而b中id選擇器級別對應的是0.這個時候應該就結束比較了。可以確定a的選擇器優先順序大於b的選擇器級別。
有趣：256個class選擇器可以乾掉1個id選擇器
CSS中選擇器的優先順序
選擇器優先順序的一些問題 box div important false important true 這一行末使用important 這一行使用了important 這種情況下，顯示為 首先css的優先順序順序 tag中的style id class tag 繼承的屬性 按同樣的順序 box di...
選擇器優先順序 CSS選擇器優先順序總結
css選擇器優先順序這個問題，相信有點經驗前端都會認為非常簡單，但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧，一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表，為了保持不同瀏覽器下樣式相同，所以我們的自定義樣式表一般都會覆...
CSS選擇器及選擇器優先順序總結
1 元素選擇器 選擇器是元素，例如 p 2 類 class 選擇器 class屬性名，可有重複，乙個元素可有多個class值，用空格隔開。3 id選擇器 id屬性名，不能有重複名字 4 復合選擇器 交集選擇器 可選中同時滿足多個選擇器的元素，例 div.p3 p3 是類名，交集選擇器的兩個選擇器之間...