標籤：
我們做項目的時候，經常遇到樣式層疊問題，被其他的樣式覆蓋，或者寫的權重不高沒效果，對權重進行具體的分析，做了一個總結。
css繼承是從一個元素向其後代元素傳遞屬性值所採用的機制。確定應當向一個元素應用哪些值時，瀏覽器不僅要考慮繼承，還要考慮聲明的特殊性，另外需要考慮聲明本身的來源。這個過程就稱爲層疊。——《css權威指南》
如下圖，css規則由選擇器和聲明塊組成，寫在選擇器後面大括號裏的就叫聲明。
一、樣式類型
1、行間/行內/內聯樣式
<h1 style="font-size:12px;color:#000;">我的行間CSS樣式。</h1>
2、內部樣式
<style type="text/css">
h1{font-size:12px; color:#000;}
</style>
3、外部樣式
<link rel="stylesheet" href="css/style.css">
例子彙總html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS選擇器的權重與優先規則?</title>
<style>
.demo{
width:1000px;
border:1px solid #eee;
margin:0 auto;
}
a {color:red;}
</style>
<link rel="stylesheet" rev="stylesheet" href="css/style1.css" type="text/css" />
<link rel="stylesheet" rev="stylesheet" href="css/style2.css" type="text/css" />
</head>
<body>
<div class="demo">
<a href="#" style="color:yellow;">11111111</a>
</div>
</body>
</html>
style1.css
a {color:blue;}
style2.css
a {color:green;}
不同情況說明：一共四種情況都設置了a的樣式，看看優先級情況；
1.當只有2個外聯樣式時：style2.css > style1.css
顯示綠色：
說明樣式相同情況下，樣式表是從上向下執行的。
2.當有外部和內聯情況下
顯示綠色：
說明內聯和外面，樣式相同情況下，樣式表是從上向下執行的。
注意：經常有錯覺，內聯大於外部，那是我們內部經常加到外部下面，覆蓋掉了外部的。
3.當有外部，內部，行間時：
顯示：黃色
說明：行間權重最高。
二、選擇器類型
1、ID #id{...} 權值0100
2、class .class{...} 權值0010
3、標籤 p{...} 權值0001
4、通用 *{...} 權值0000
5、屬性 [type="text"]{...} 權值0010
6、僞類 ：hover{...} 權值0010
7、僞元素 ::first-line{...}，:after{...} 權值0001
8、子選擇器、相鄰選擇器 權值0000
三、權重計算規則
如下千級權值、百級權值……是自己發明的詞，非官網，好理解而已。
特級：!important（權重），優先級是最高，沒有特殊性值，爲了方便記憶，可以認爲它的特殊性值爲1,0,0,0,0。
第一等(千級權值)：代表 內聯樣式，如: style=””，權值爲:1000。
第二等(百級權值)：代表 ID選擇器，如：#content，權值爲:0100。
第三等(十級權值)：代表 類，僞類和屬性選擇器，如: .content , :hover , [type="text"] 權值爲:0010。
第四等(個級權值)：代表 標籤選擇器和僞元素選擇器，如: p ，::first-line 權值爲:0001。
零級權值：通配符、子選擇器、相鄰選擇器等的。如: *、>、+，權值爲:0000。
繼承權值：-1，繼承的樣式沒有權值，通配符、子選擇器、相鄰選擇器等優先級高於元素繼承的優先級，可以理解爲繼承的權值是-1。繼承樣式的元素就是沒人管的孩子，他們就近找一戶人家罷了。
<style type="text/css">
.panel_list li{font-size: 20px !important;}
div{font-size: 12px;}
</style>
...
<ul class="panel_list">
<li> <div class="mytitle">樣式測試</div> </li>
</ul>
.panel_list li{font-size: 20px !important;} 雖然權值很高，但對於div元素來說，只是一個繼承樣式，所以權值是最低的-1，
設計思想就是要讓繼承的樣式被明確指定的樣式覆蓋。
補充：CSS的繼承是指被包在內部的標籤將擁有外部標籤的樣式性質，它是依賴於祖先-後代的關係的。
多數邊框類屬性，比如象Padding（補白），Margin（邊界），背景和邊框的屬性都是不能繼承的。表格也不能繼承父親的樣式。
css選擇器權重列表如下：
| 權重 | 選擇器 |
|---|---|
| 10000 | !important（!important並不是選擇器，但是權重卻是最高的） |
| 1000 | 內聯樣式：style="" |
| 100 | ID選擇器： #idName{...} |
| 10 | 類、僞類、屬性選擇器：.className{...} / :hover{...} / [type="text"] ={...} |
| 1 | 標籤、僞元素選擇器：div{...} / :after{...} |
| 0 | 通用選擇器（*）、子選擇器（>）、相鄰選擇器（+）、同胞選擇器（~） |
例如：以下規則中選擇器的權值分別是：
1 style="color: yellow;" /*權值：1000*/ 2 div a{color: green;} /*權值：1+1=2*/ 3 #demo a{color: orange;} /*權值：100-0-1*/ 4 div#demo a{color: red;} /*權值：100-0-2*/ 5 .demo a{color: black;} /*權值：0-10-1*/ 6 .demo input[type="text"]{color: blue;} /*權值：0-20-1*/ 7 .demo *[type="text"]{color: grey;} /*權值：0-20-0*/
變態情況：鑫大神的例子256個class類名選擇器幹掉一個id選擇器實例頁面--->親自試驗沒有幹掉……
http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html
解釋：
因爲test元素是不存在的，因此，爲了兼容IE6~8瀏覽器，需要在頭部寫上額外的一行JS代碼：document.createElement("test");
chrome 沒有此現象，FireFox有此現象，因爲在FireFox的源代碼中，所有的類名(classes)都是以8字節字符串存儲的，8字節所能存儲的最大值是255，當出現256個class時候，存儲的數字會進位，從而超過id權值。
這其實是一個小BUG，有些瀏覽器廠商已經開始修復。
四、比較規則
0-100-0-0 > 0-0-110-0。也就是說從左往右逐個等級比較，前一等級相等才往後比。
百級權值跟百級權值比較，十級權值跟十級權值比較……十級權值不能進位到百級權值，
#demo{color: orange;}的權值：100-0-1，意思是百級權值是100，十級權值是0，個級權值是1，
.c1.c2.c3.c4.c5.c6.c7.c8.c9.c10.c11{color: red;}的權值：0-110-0，最後結果是#demo{color: orange;}生效。
無論是行間、內部和外部樣式，都是按照這個規則來進行比較。而不是直觀的行間>內部>外部樣式；ID>class>元素。
在權重相同的情況下，後面的樣式會覆蓋掉前面的樣式。
通配符、子選擇器、相鄰選擇器等，雖然權值爲0000，但是也比繼承的樣式優先。
五、實例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS選擇器的權重與優先規則?</title>
<style>
a{color: yellow;} /*1*/
div a{color: green;} /*2*/
.demo a{color: black;} /*10-1*/
.demo a[title]{color: blue;} /*20-1*/
.demo *[title]{color: grey;} /*20*/
#demo a{color: orange;} /*100-0-1*/
div#demo a{color: red;} /*100-0-2*/
</style>
</head>
<body>
<a href="">第一條應該是黃色</a> <!--適用第1行規則-->
<div><a href="">第二條應該是綠色</a></div>
<div class="demo">
<a href="">第三條應該是黑色</a><br/><!--適用第1、2、3行規則，第3行優先級高-->
<a href="" title="#">第四條應該是藍色</a><br/><!--適用第4、5行規則，第4行優先級高-->
<p title="#">第五條應該是灰色</p><!--適用第4、5行規則，第5行適用-->
</div>
<div id="demo">
<a href="">第七條應該是紅色</a><!--適用第6、7行規則，第7行優先級高-->
</div>
</body>
</html>
顯示：
另外參考：https://blog.csdn.net/qq_41761591/article/details/97547284，權值的計算更到位。
細說繼承特性
1、就近繼承原則
strong分別從body和p中繼承了color屬性，但是由於p在繼承樹上離strong更近，因此strong中的文字最終繼承p的藍色。
<style type="text/css">
body {color:black;}
p {color:blue;}
</style>
...
<body>
<p>welcome to <strong>我的博客</strong></p>
</body>
2、直接指定樣式優先
繼承的樣式沒有權值，通配符、子選擇器、相鄰選擇器等優先級高於元素繼承的優先級，可以理解爲繼承的權值是-1。
繼承的樣式會被明確指定的樣式覆蓋。
<ul class="panel_list">
<li>
<div class="mytitle">字體測試</div>
</li>
</ul>
內部樣式
<style type="text/css">
.panel_list li{font-size: 20px;}
div{font-size: 12px;}
</style>
看起來 .panel_list li{font-size: 20px;} 權值是0-10-1，但是div是繼承此樣式，所以對於div來說，此樣式權值是繼承權值-1，
而 div{font-size: 12px;} 權值是0-0-1，此樣式生效。
修改爲
<style type="text/css">
.panel_list li>div{font-size: 20px;}
div{font-size: 12px;}
</style>
此時對於div來說，
.panel_list li>div{font-size: 20px;} 權值是：0-10-2，
div{font-size: 12px;}權值是：0-0-1，
所以 .panel_list li>div{font-size: 20px;} 生效。
國外有人制作了一個很通俗易懂的，大魚吃小魚，小魚吃小蝦的CSS選擇器類型與權重關係圖：
