css權重是什么？
概述
css Specificity中文一般譯為css優先級、css權重。相比“權重”，“優先級”更好理解，mozilla官方中文文檔就翻譯為“優先級”。
Specificity基於設定的匹配規則，瀏覽器通過設定好的優先級來判斷哪些屬性值DOM元素最為相關，從而在該DOM上應用這些值。
簡單理解就是一個DOM的某個屬性值有多個css樣式設置，優先級高的那個應用。很多css設置不生效的問題，都是因為在某處定義了一個更高的優先級，從而導致該處樣式不生效。
優先級的順序如下：
important > 內聯(style) > ID > 類(class) > 標簽(li...) | 偽類(:hover,:focus...) | 屬性選擇[attr=''] > 偽對象(:before,:after) > 通配符(*) > 繼承(inherit)
那么如何確定優先級呢？
Specificity值的計算
先說結論：
一般采用10進制的簡單相加計算方式。從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者偽類+10，一個元素名，或者偽元素+1.
具體的css的規則如下：
- 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：計算該選擇器中偽類及其它屬性的數量（包括類選擇器、屬性選擇器等，不包括偽元素）。 （例如， .logo[id='site-logo'] 這樣的選擇器，計算為 0, 0, 2, 0）。
- D：計算該選擇器中偽元素及標簽的數量。（例如，p:first-letter 這樣的選擇器，計算為0, 0, 0, 2）。
/*通配選擇符(Universal Selector)*/ * {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
/*類型選擇符(Type Selectors)*/ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
/*類選擇符(Class Selectors)*/ .active{color:blue;}/* a=0 b=0 c=1 d=0 -> specificity = 0,0,1,0 */
/*偽類選擇符(Pseudo-classes Selectors)*/li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
/*屬性選擇符(Attribute Selectors)*/ h[title] {color:blue;} /* a=0 b=0 c=1 d=0 -> specificity = 0,0,1,0 */
/*ID選擇符(ID Selectors)*/ #sj{ font-size:12px;} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
/*內聯(style)*/ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
/*包含選擇符(Descendant Selectors)*/ ul li {} /* a=0 b=0 c=0 d=1+1 -> specificity = 0,0,0,2 */
/*相鄰+屬性選擇符(Adjacent Sibling Selectors)*/ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
大多數情況下，按照以上的理解得出的結論是沒問題的，不過總有例外，如
body header div nav ul li div p a span em {color: red}
.ctn{color:blue}
按照錯誤的計算方法，樣式一的權重值是11，樣式二的權重值是10，如果這兩條規則用於同一個元素，則該元素應該是紅色。實際結果卻是藍色。
因此還有一些基本的規則
優先級的基本規則
1.相同的權重：以后面出現的選擇器為最后規則
假如在外部樣式表中，同一個CSS規則你寫了兩次，那么出現在前面的選擇器權重低，你的樣式會選擇后面的樣式：
#content h1 {
padding: 5px;
}
#content h1 {
padding: 10px;
}
兩個選擇器的權重都是0，1，0，1，最后那個規則生效。
2.不同的權重，權重值高則生效
Id選擇器的優先級比屬性選擇器高,比如下面的例子里 樣式表中#p123的權重明顯比[id=p123]的權重要高。
a#a-02 { background-image : url(n.gif); }
a[id="a-02"] { background-image : url(n.png); }
3.就近原則
如我在樣式表中對DOM定義的樣式A,然后我又在html也對DOM定義了B,應用B
.A {
padding: 5px;
}
<style type="text/css">
.B {
padding: 10px;
}
</style>
4.無論多少個元素組成的選擇器，都沒有一個class選擇器優先級高。
就是上面的那個例外。
5.無視DOM樹的距離
如下樣式：
body h1 {
color: green;
}
html h1 {
color: purple;
}
當它應用在下面的HTML時:
<html>
<body>
<h1>Here is a title!</h1>
</body>
</html>
瀏覽器會將它渲染成purple;
實際上規則1也適用於此，不過由於其DOM負極標簽的不同，故單拎出來特殊化。
6.:not 偽類例外
:not 否定偽類在優先級計算中不會被看作是偽類. 事實上, 在計算選擇器數量時還是會把其中的選擇器當做普通選擇器進行計數.
div.outer p {
color:orange;
}
div:not(.outer) p {
color: lime;
}
當它被應用在下面的HTML時,就是文字描述效果
<div class="outer">
<p>orange</p>
<div class="inner">
<p>lime</p>
</div>
</div>
7.!important 規則例外
當在一個樣式聲明上使用 !important 規則時，該樣式聲明會覆蓋CSS中任何其他的聲明。
盡管技術上 !important 與優先級毫無關系，但是它們之間直接相互影響。
使用 !important 是一個壞習慣，應該盡量避免，因為這打斷了樣式表中的固有的級聯規則 使得調試找bug變得更加困難了。
當兩條相互沖突的帶有!important 規則的聲明被應用到相同的元素上時，擁有更大優先級的聲明將會被采用。
具體的參考!important_規則例外,就不一一粘貼過來了。