1. 程式人生 > >css優先級計算規則

css優先級計算規則

規則 類選擇器 orange 選擇器 比較 ref 分別是 tex cnblogs

選擇器的特殊性值表述為4個部分,用0,0,0,0表示。

  • ID選擇器的特殊性值,加0,1,0,0
  • 類選擇器、屬性選擇器或偽類,加0,0,1,0
  • 元素和偽元素,加0,0,0,1
  • 通配選擇器*對特殊性沒有貢獻,即0,0,0,0
  • 最後比較特殊的一個標誌!important(權重),它沒有特殊性值,但它的優先級是最高的,為了方便記憶,可以認為它的特殊性值為1,0,0,0,0

例如:以下規則中選擇器的特殊性分別是:

a{color: yellow;} /*特殊性值:0,0,0,1*/
div a{color: green;} /*特殊性值:0,0,0,2*/
.demo a{color: black;} /*特殊性值:0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值:0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值:0,0,2,0*/
#demo a{color: orange;} /*特殊性值:0,1,0,1*/
div#demo a{color: red;} /*特殊性值:0,1,0,2*/

 詳細內容戳這裏 

css優先級計算規則