在前端開發的時候，css構建樣式規則，這個時候我們會遇到乙個問題：當我們對同乙個元素做多個樣式規則，其中發生了衝突的時候，css是如何選擇最終呈現的樣式
如下：
divdiv.main
div#main2
<
body
>
<
div
class
="main"
id="main2"
>
ssss
div>
body
>
最終這個「sss」會是什麼顏色呢？這就卻決於css選擇器的特殊性：
特殊性的描述可分為四個部分：如：0，0，0，0
什麼意思呢？這四個數字，是有優先順序的，這就類似於nvidia的顯示卡
我們先做如下定義：
四個數字，按位比較，從左到右優先順序依次降低，每一位數字越大，特殊性越大，特殊性越大，有衝突的選擇器規則將被使用到最終效果
用於比較時候：
從左往右比較兩個選擇器的特殊性，比較按同位比，如果當前位上，選擇器1大於選擇器2，選擇器1特殊性大；如果當前位上，選擇器1小於選擇器2，選擇器2特殊性大；如果相等，跳過當前位，比較下一位，方法與當前位同理
舉例：（由大到小的特殊性）
1，0，0，0>
0，2，0，0>
0，1，2，0>
0，0，3，0>
0，0，1，0>
0，0，0，1>0，0，0，0
請先理解上面的例子，後面我們使用這種方式描述特殊性
我們看到特殊性描述一共有4位數，就像數學裡的千，百，十，個一樣
第一位：內聯樣式
第二位：id選擇器（#main）
第三位：類選擇器，屬性選擇器或偽類（.main 或 input[name=main] 或 a:hover li:first-child）
第四位：元素或偽元素(p,div,input等常用的元素，偽元素比如p:first-letter p:first-line)
萬用字元*(0,0,0,0)
空格什麼都不算（0,0,0,0都談不上，最小特殊性）對選擇器特殊性沒有任何影響
舉例：假設以下的選擇器指向同乙個元素，並且出現了矛盾
1h1 /*
0001*/2
p em /*
0002*/3
.grape /*
0010*/4
*.bright /*
0010*/5
p.bright /*
0022*/6
#id /*
0100*/7
div#id /*
0111
*/
很顯然最後這個這個元素，是黃色（yellow），因為他的特殊性最大！
下乙個，重要性！important，重要規則總會勝出
有時候某個宣告可能非常重要，超過了所有其他宣告，css2.1開始允許在宣告「；」符號前使用important
p.light
必須在分號之前宣告最後插入，哪乙個規則需要強調，就加上這個!important
標誌為!important的宣告並沒有特殊的特殊性值，不過要與非重要宣告分開來考慮
如果乙個重要宣告和非重要宣告起了衝突，重要的必定會勝利
CSS css特殊性 優先順序 權重
css選擇器可以用多種方式去選擇元素，實際上乙個元素可以由使用兩個或者多個規則來匹配，每個規則都有各自的選擇器。請看例子 css h1 body h1 h2.grade h2 然後是特別長的乙個選擇器 html body table tr id totals td ul li li answer各自...
CSS的特殊性 specificity
css的特殊性是非常重要卻又經常被忽視的屬性,特別是在團隊合作下的產品迭代開發中,因為不注重css的特殊性最後導致某些 混亂不堪,這裡就把自己對css特殊性的認識做一些歸納總結.css的特殊性 specificity 也可以稱為css的優先順序或權值 對於每個樣式表規則,瀏覽器都會計算選擇器的特殊性...
CSS的特殊性 specificity
css的特殊性是非常重要卻又經常被忽視的屬性,特別是在團隊合作下的產品迭代開發中,因為不注重css的特殊性最後導致某些 混亂不堪,這裡就把自己對css特殊性的認識做一些歸納總結.css的特殊性 specificity 也可以稱為css的優先順序或權值 對於每個樣式表規則,瀏覽器都會計算選擇器的特殊性...