<style type="text/css"> body h1 { color: green; } html h1 { color: purple; } </style> <body> <h1>Here is a title!</h1> </body>
css中優先級無視DOM樹中節點的距離遠近，就是說DOM樹中的距離不會對元素優先級計算產生影響。如果優先級相同，靠后的css會應用到元素上，而html h1靠后，當然是紫色了，如果調換html h1和body h1順序就是綠色了。
如果是繼承關系的話，就和dom樹節點的距離遠近有關了
<style type="text/css"> #close{ color: green; } #further{ color: purple; } </style> <body> <div id="further"> <div id="close"> <h1>Here is a title!</h1> </div> </div> </body>
不管#close和#further順序，文字都是綠色的
css的優先級
優先級僅由選擇器的匹配規則來決定
內聯》ID選擇器》偽類=屬性選擇器=類選擇器》元素選擇器【p】》通用選擇器(*)》繼承的樣式
二、優先級計算：
上面說了，優先級僅有選擇器決定，怎么個計算方法呢？
a、用a表示選擇器中ID選擇器出現的次數
b、用b表示類選擇器，屬性選擇器和偽類選擇器出現的總次數。
c、用c表示標簽選擇器、偽元素選擇器出現的總次數
d、忽略通用選擇器
e、然后計算a*100+b*10+c的大小，這就是優先級了。
權重：內聯樣式1000》id選擇器100》class選擇器10》標簽選擇器1
Note:
ID選擇器「如：#header」，Class選擇器「如：.foo」，屬性選擇器「如：[class]」，偽類「如：:link」，標簽選擇器「如：h1」，偽元素「如：:after」，選擇器「*」
接下來從以下幾點深入分析優先級。
1、優先級計算無視DOM樹中的距離
<!DOCTYPE html> <html> <style type="text/css"> body h1 { color: green; } html h1 { color: purple; } </style> </head> <body> <h1>Here is a title!</h1> </html>
//結果為紫色
body h1和html h1的優先級相同
2、偽類選擇器，屬性選擇器和class選擇器的優先級一樣【update20170422】
偽類=屬性選擇器=類選擇器
所以后面的會覆蓋前面的。
<!DOCTYPE html> <html> <meta charset="utf-8"> <style type="text/css"> :focus { color: red; } [class] { color: blue; } .classtest { color: green; } </style> </head> <body> <div class="classtest"> 什么顏色文字 </div> </body> </html>
//結果為綠色
3、基於類型的優先級
優先級是根據選擇器的類型進行計算的。
舉例：屬性選擇器盡管選擇了一個ID但是在優先級計算中還是根據類型計算，因此即使選擇的是相同的元素，但ID選擇器有更高的優先級，所以* #foo設置的樣式生效。
<!DOCTYPE html> <html> <style type="text/css"> * #foo { color: green; } *[id="foo"] { color: purple; } </style> </head> <body> <p id="foo">I am a sample text.</p> </body> </html>
//結果是綠色
4、：not偽類不參與優先級計
【：not】否定偽類在優先級計算中不會被看做是偽類，但是，會把:not里面的選擇器當普通選擇器計數。這句話有點不好理解，其實就是忽略掉:not，其他偽類(如:hover)參與CSS優先級的計算，但是「:not」不參與計算。
<!DOCTYPE html> <html> <style type="text/css"> div.outer p { color:red; } div:not(.outer) p { color: blue; } </style> </head> <body> <div class="outer"> <p>This is in the outer div.</p> <div class="inner"> <p>This text is in the inner div.</p> </div> </div> </body> </html>
該例子中，選擇器div.outer p 和選擇器div:not(.outer) p的優先級是相同的，:not被忽略掉了，:not(.outer)中的.outer正常計數。
如果調換位置，inner元素會變成紅色
div:not(.outer) p {
color: blue;
}
div.outer p {
color:red;
}
更像詳細的可以查看這里：https://www.cnblogs.com/starof/p/4387525.html
補充權重知識:
css權重的理解：css選擇規則的優先級，是按照css選擇器的權重值的比較來確定的。
css優先級規則：
1.css選擇規則的權值不同時，權值高的優先；
2.css選擇規則的權值相同時，后定義的規則優先；
3.css屬性后面加!important時，無條件絕對優先；
權值等級划分：
第一等級：代表 內聯樣式，如 style=""，權值為 1,0,0,0；
第二等級：代表 ID選擇器，如 #id="", 權值為 0,1,0,0；
第三等級：代表 calss | 偽類 | 屬性 選擇器，如 .class | :hover,:link,:target | [type], 權值 0,0,1,0；
第四等級：代表 標簽 | 偽元素 選擇器，如 p | ::after, ::before, ::fist-inline, ::selection, 權值 0,0,0,1；
此外，通用選擇器（*），子選擇器（>）， 相鄰同胞選擇器（+）等選擇器不在4等級之內，所以它們的權值都為 0,0,0,0；
權值計算 公式：
權值 = 第一等級選擇器*個數，第二等級選擇器*個數，第三等級選擇器*個數，第四等級選擇器*個數；
權值比較 規則：
當兩個權值進行比較的時候，是從高到低逐級將等級位上的權重值（如 權值 1,0,0,0 對應--> 第一等級權重值，第二等級權重值，第三等級權重值，第四等級權重值）來進行比較的，而不是簡單的 1000*個數 + 100*個數 + 10*個數 + 1*個數 的總和來進行比較的，換句話說，低等級的選擇器，個數再多也不會越等級超過高等級的選擇器的優先級的;【為什么這么特別強調呢，因為為在網上查資料的時候，看到好多博客是把這個權重值理解成了所有等級的數字之和了】，說到這里 再 配合下圖 大家應該就差不多理解了，
總結，這個比較規則就是三點
1.先從高等級進行比較，高等級相同時，再比較低等級的，以此類推；
2.完全相同的話，就采用 后者優先原則（也就是樣式覆蓋）；
3.css屬性后面加 !important 時，無條件絕對優先（比內聯樣式還要優先）；
<!DOCTYPE html>
<html>
<head>
<title>CSS 選擇器</title>
<style type="text/css">
#parent p { background-color: red; }
div .a.b.c.d.e.f.g.h.i.j.k p{ background-color: green;
</style>
</head>
<body>
<div id="parent">
<div class="a b c d e f g h i j k">
<p>xxxx</p>
</div>
</div>
</body>
</html>
如果對css權重理解不透徹的話，看到上邊的例子，估計會有很大一部分人都會認為最后 p 的背景色是 green; 為什么呢? 因為理解成了錯誤的權值計算規則
qz1 = 100 + 1 = 101
qz2 = 1 + 10*11 + 1 = 112
qz1 < qz2
所以 第二條樣式 優先級高，背景色為 green；
NO,NO,NO....結果卻是 背景色為 red；如圖：
所以也就印證了，上面所說的權值比較規則 第一條。
<!DOCTYPE html>
<html>
<head>
<title>CSS 選擇器</title>
<style type="text/css">
/*
1.先從高等級進行比較，高等級相同時，再比較低等級的，以此類推，
2.完全相同的話，就采用 后者優先原則（也就是樣式覆蓋），
3.有 !important 時，無條件絕對優先
如下面的 示例：
*/
#parent #child1 {background-color: red;} /* 權值: 0,2,0,0; */
#parent #child1 {background-color: green;} /* 權值: 0,2,0,0; */
</style>
</head>
<body>
<div id="parent">
<div id="child1">xxxxxx</div>
</div>
</body>
</html>
展示結果：
所以也就印證了，上面所說的權值比較規則 第二條；
<!DOCTYPE html>
<html>
<head>
<title>CSS 選擇器</title>
<style type="text/css">
/*
1.先從高等級進行比較，高等級相同時，再比較低等級的，以此類推，
2.完全相同的話，就采用 后者優先原則（也就是樣式覆蓋），
3.有 !important 時，無條件絕對優先
如下面的 示例：
*/
#parent div#child1 { background-color: yellow !important; } /* !important 無條件絕對優先 */
#parent div#child1 {background-color: red;} /* 權值: 0,2,0,1; */
#parent #child1 {background-color: green;} /* 權值: 0,2,0,0; */
</style>
</head>
<body>
<div id="parent">
<div id="child1" style="background-color:orange;">xxxxxx</div> <!-- 權值：1, 0, 0, 0 -->
<div id="child2">xxxxxx</div>
</div>
</body>
</html>
如果沒有 !important 的樣式規則時，相信大家都知道內聯樣式的優先級是最高的，背景色為 orange；
加了 !important 之后，沒有任何理由的 它的優先級就最高了，背景色為 yellow;
展示效果, 如圖：
所以也就印證了，上面所說的權值比較規則 第三條；