選擇器的權重
權重就是我同個元素，有多個選擇器的情況下，我該選擇哪一個選擇器的樣式。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#p{
background: red;
}
.p{
background: skyblue;
}
p{
background: green;
}
</style>
</head>
<body>
<p style="background: pink" id="p">行內的樣式</p>
<p class="p" id="p">id的樣式</p>
<p class="p">class的樣式</p>
<p>p標簽的樣式 </p>
</body>
</html>
通過上面的比較，可以得出，行內樣式>id選擇器>類選擇器>標簽選擇器>通配符
那么有沒有可能讓標簽選擇大於所有的選擇器呢，答案是有的，只要加上這行代碼!important，任何選擇器的權重就是無限大了。
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
#p{
background: red;
}
.p{
background: skyblue;
}
p{
background: green !important;
}
*{
background: brown
}
</style>
</head>
<body>
<p style="background: pink" id="p">行內的樣式</p>
<p class="p" id="p">id的樣式</p>
<p class="p">class的樣式</p>
<p>p標簽的樣式 </p>
</body>
</html>
選擇器的類型
ID選擇器 #id
類選擇器 .class
標簽選擇器 p,div等
屬性選擇器 [type="text"]
通用選擇器 *
偽類選擇器 :hover
偽元素選擇器 ::before
子選擇器、相鄰選擇器
選擇器的權重
第一等：行內樣式是 1000，行內樣式雖然沒被列入選擇器里，但它的權重是最高的
第二等：id選擇器是 100
第三等：類選擇器、偽類選擇。屬性選擇器、屬性選擇器 10
第四等：標簽選擇器和偽元素選擇器 1
其他選擇器的權重為0
繼承的樣式沒有權重
如果等級相同，那么最后的樣式會覆蓋前面的樣式
最后請記住!important 的權重是無限大的
權重的計算
將選擇器的權重加起來
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
body input{
color: blue;
}
input{
color: red;
}
</style>
</head>
<body>
<input type="text" name="" value="ssss">
</body>
</html>
最終的樣式是文字為藍色
因為body input 的權重是2，body,input每個的權重是1，所以加起來就2
#id .input input{
color: yellow;
}
上面的權重就是 100 + 10 +1 = 111