問題
css的加載順序 行內 > 內部 > 外部 / id選擇器 > class選擇器？？？
0
今天我們來講講css中的權重問題。在很久很久以前，老師給我說，樣式有三種寫法，一種是行內樣式，一種是內部樣式，還有一種是外部樣式。在引入樣式的時候，行內樣式優(yōu)先級是最高的，內部樣式會覆蓋外部樣式。id選擇器大于class選擇器。我也沒想，就信了，在很長一段時間里，按照這種規(guī)則去寫代碼，是沒有問題的。直到有一次寫代碼注意到了這個問題，開始重視……
最開始是這樣的，沒有毛病，內部樣式會覆蓋外部樣式。
/*test.css*/
#div { color: red; }
<link rel="stylesheet" href="test.css">
<style>
#div {
color: yellow;
}
</style>
<div id='div'>
<p id='p'>這里是測試文本</p>
</div>
1
然后這樣，也是沒有問題的，id選擇器 > class選擇器
<style>
#div { color: yellow; }
.div { color: red; }
</style>
<div id='div' class='div'>
<p id='p'>這里是測試文本</p>
</div>
2
當你一直認為這是正確的時候，突然出現(xiàn)了這樣的問題
/*test.css*/
#div { color: red; }
<style>
#div {
color: yellow;
}
</style>
<link rel="stylesheet" href="test.css"> <!-- 在后邊引入 -->
<div id='div'>
<p id='p'>這里是測試文本</p>
</div>
3
當在<style>標簽后邊引入外部css的時候，發(fā)現(xiàn)HTML居然用的外部樣式，不是說好的內部優(yōu)先級高于外部嗎？？？好吧，估計是我記錯了，按照加載順序，本來后加載的就應該覆蓋之前加載的，這我是可以接受的。
然后，頁面代碼再次改變……
<style>
#div p { color: red; }
#p { color: yellow; }
</style>
<div id='div' class='div'>
<p id='p'>這里是測試文本</p>
</div>
4
好了，這次我徹底不淡定了，說好的id選擇器優(yōu)先級應該要高于class和tag標簽選擇器啊，所以#p的優(yōu)先級應該是最高的啊……由此引入今天的話題——css權重。
概述
css最終顯示的樣式是由權重確定的，每一種選擇器都有一個權重值，不管誰先加載或后加載，誰的權重值最終最大，就顯示誰的樣式，如果相同，則后聲明的優(yōu)先。從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者偽類+10，一個元素名或者偽元素+1。并且做加法時不進位。比如
#div .test p {} /* 0111 */
body#container div {} /* 0102 */
/*相加時不進位*/
.p1 .p2 .p3 .p4 .p5 .p6 .p7 .p8 .p9 .p10 .p11 div { color: red; } /* 0,0,11,1 */
#p1 div { color: yellow; } /* 0,1,0,1 */ /* 這是大于上邊一行的權重，所以顯示出來是黃色的 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.p1 .p2 .p3 .p4 .p5 .p6 .p7 .p8 .p9 .p10 .p11 span { color: red; }
#div span { color: yellow; }
</style>
</head>
<body style="background-color: black;">
<div id="div">
<p class='p1'>
<p class='p2'>
<p class='p3'>
<p class='p4'>
<p class='p5'>
<p class='p6'>
<p class='p7'>
<p class='p8'>
<p class='p9'>
<p class='p10'>
<p class='p11'>
<span>這里是測試數(shù)據(jù)</span>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</p>
</div>
</body>
</html>
result
總結記憶方式：
- 將權重標記為
千百十個四個數(shù)位，起始數(shù)字都為0 - 看見一個行內樣式
style=""，就在千位上+1 - 看見一個id選擇器
id=""，則在百位上+1 - 看見一個類選擇器
class=""偽類選擇器:hover屬性選擇器[type='']，則在十位上+1 - 看見一個標簽選擇器
span偽元素選擇器::after，則在個位上+1 - 此外的選擇器
*>+等不計入 - !important最高，只要設置，則忽略其他權重
- 最終從左往右開始比較，相等則繼續(xù)比較，不等則停止比較，較大者權重大。
