CSS權重的問題:選擇器權重值的計算
編輯：CSS進階教程
今天去某公司面試，有一題考的是CSS權重的問題。 確實沒研究過
在此，做個記錄。
權重順序 “important > 內聯 > ID > 類 > 標簽 | 偽類 | 屬性選擇 > 偽對象 > 繼承 > 通配符”。 選擇器權重值的計算
A：如果規則是寫在標簽的style屬性中（內聯樣式），則A=1，否則，A=0. 對於內聯樣式，由於沒有選擇器，所以B、C、D的值都為0，即A=1, B=0, C=0, D=0（簡寫為1,0,0,0，下同）。
B：計算該選擇器中ID的數量。（例如，#header 這樣的選擇器，計算為0, 1, 0, 0）。
C：計算該選擇器中偽類及其它屬性的數量（包括class、屬性選擇器等，不包括偽元素）。 （例如， .logo[id='site-logo'] 這樣的選擇器，計算為0, 0, 2, 0）。
D：計算該選擇器中偽元素及標簽的數量。（例如，p:first-letter 這樣的選擇器，計算為0, 0, 0, 2）。
總結- 一條樣式規則的整體權重值包含四個獨立的部分：[A, B, C, D];
- A表示內聯樣式，只有1或者0兩個值；
- B表示規則中ID的數量；
- C表示規則中除了ID、標簽和偽元素以外的其它選擇器數量；
- D表示規則中標簽和偽元素的數量；
- 比較時從高位到低位（從A到D）分別比較，高位相同才需要比較低位；
- 有 !important 標記的屬性權重值無視沒用 !important 指定的一切情況；
- 多次指定 !important 時，相互抵銷。
------------------------------------------------------------------------------- CSS2.1中使用一個4位的數字來表示權重，以下是有關權重的一些規定:
類型選擇符的權重為：0001
類選擇符的權重為：0010
通用選擇符的權重為：0000
子選擇符的權重為：0000
屬性選擇符的權重為：0010
偽類選擇符的權重為：0010
偽元素選擇符的權重為：0010
包含選擇符的權重為：包含的選擇符權重值之和
內聯樣式的權重為：1000
繼承的樣式的權重為：0000
<!--例子1-->
<html> <head> <title>樣式沖突</title> <style type="text/css"> <!-- p{color:red} /*權重為:0001*/ p[align]{color:blue} /*權重為:0010*/ .vip{color:green} /*權重為:0010*/ #myid{color:purple} /*權重為:0100*/ --> </style> </head> <body> p{color:red} 權重為:0001<br/> p[align]{color:blue} 權重為:0010<br/> .vip{color:green} 權重為:0010<br/> #myid{color:purple} 權重為:0100<br/>
<p>p{color:red} <p class="vip" id="myid">#myid{color:purple} <p align="left" class="vip" >.vip{color:green} 類和屬性兩者權重相同，但為什麼會應用類樣式而不是屬性樣式， </body> </html>
<!--例子-2-->
<!--權重可以累加-->
<html> <head> <style type="text/css"> <!-- p{color:red} body p{color:green} --> </style> </head>
<body> <p>body p{color:green}
為什麼會應用body p{color:green}樣式，而不是p{color:red}樣式呢？ 因為body p{color:green}==body權重 + p權重 ==2 > p{color:red}==1 </body> </html>
<!--例子-3-->
<!--內聯樣式的權重為1000，大於內部樣式和外部樣式的權重，因此當樣式沖突時，只會顯示內聯樣式-->
<html> <head> <style type="text/css"> <!-- p{color:red} --> </style> </head> <body> <p style="color:green">It's green </body> </html>
<!--例子-4--> <!--!mportant--> <html> <head> <style type="text/css"> <!-- body{font-size:20pt; color:blue;} div{text-decoration:underline !important; font-size=:10pt; color:red !important;} .vip{text-decoration:overline; font-size:30pt; color:green} #other{color:black} p{color:yellow} --> </style> </head>
<body> body中的文字 <div class="vip"> class="vip",div中的文字 <p>p中的文字,p位於div中 <div id="other"> id="other",另一個div中的文字 <br/>雖然類型選擇器div的權重要比類選擇器.vip和.other要小，但如果在div的樣式之後加上!important, 則表示在div標簽文本(不包括div標簽中的標簽，因為它們具有可繼承性),該樣式具有最高權重。 </body> </html>
########################################################################
1、特殊性 首先來看一下這個例子將會發生的情形：
.grape { color:Blue; } H1 { color: Red; } <h1 class="grape">Meerkat <em>Central</em></h1>
H1和.grape都匹配上面的H1元素，那麼到底應該使用哪一個呢？實踐證明.grape是正確答案，把句子顯示為藍色。根據規范，一般的HTML元素 選擇符(H1,P 等)具有特殊性1，類選擇符具有特殊性10，ID選擇符具有特殊性100，值越大權重就越大，就優先選用。
H1 { color: Red; } /* 特殊性 = 1 */ P EM { color: Blue; } /* 特殊性 = 2 */ .grape { color: Fuchsia; } /* 特殊性 = 1 0 */ P.bright { color: Yellow; } /* 特殊性 = 11 */ P.bright EM.dark{ color: Gray; } /* 特殊性 = 12 */ #ID01 { color: Red; } /* 特殊性 = 100 */
2、繼承
在特殊性的框架下，被繼承的值具有特殊性0，也就是說任何顯式聲明的規則將會覆蓋其繼承樣式，即便這條規則具有多高的權重。
H1#ID01 { color: Red; } /* 特殊性 = 101 */ EM{ color: Gray; } /* 特殊性 = 1 */ <H1 ID="ID01>Meerkat <EM><Central</EM></H1>
雖然ID選擇符特殊性最高，但由於在特殊性的框架下，繼承值只有特殊性0，因些Central會顯示為Gray顏色。
3、STYLE元素
還有sytle元素在CSS下權值定義為100，盡管ID選擇也一樣，實際上style元素比ID具有更高的特殊性。
#ID01 EM{ color: Gray; } <H1 ID="ID01">Meerkat <EM style="color: red;">Central</EM>!</H1> 會顯示為red顏色。
4、重要性(!important)
!important具最高特特性比如說1000，因此!important規則會覆蓋內聯STYLE屬性的內容。
H1{ color: red !important; } <H1 style="color:black;">Meerkat Central!</H1> 將顯示為RED顏色。
一種特殊情形
P#warn { color: Red !important; } EM { color: Black; } <p id="warn">This text is red, but <em>emphasized text is black.</em> 雖然定義!important最高特殊性，但句子並沒有全部顯示為RED紅色，為什麼呢？也許我們得回頭看看前面的規則，在前面的第二點繼承中提“在特殊 性的框架下，繼承值只有特殊性0。”因此即便定義!important，繼承裡的特殊性也只有0，所以顯示為特殊性為1的EM規則。
權重順序為：繼承 => HTML普通選擇符 => 類選擇符 =>style元素 => !important
5、層疊
1) 若兩條規則具有相同的權值、起源及特殊性，那在樣式表中最後出現的規則優先。
2) 任何位於文檔中的規則都比引入的規則優先。
小編推薦
熱門推薦