偽類選擇器
除去眾所周知的 類選擇器 和 ID 選擇器外叠国，還有相對接觸不那么頻繁的 偽類選擇器和 偽元素選擇器虑粥。而提起偽類選擇器瘪阁，大家可能首先想到 :hover/visited/active/focus 四種狀態(tài)偽類软驰，便沒了下文君躺，實際上偽類選擇器是個大家族最铁，這里有一份標(biāo)準(zhǔn)偽類列表。
基于關(guān)系的選擇器
- 關(guān)系選擇器比較容易令人忽視的就是 A E / A>E 的區(qū)別了咖城，前者是匹配了A的所有后代元素E族檬，而后者匹配的是 A 的所有直系后代元素 E歪赢。
- 第二個容易令人混淆的就是 B + E 和 B ~ E，二者都針對的兄弟元素(不包括自己)单料。請看如下例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.text2 + span {
color: blue;
}
.text4 ~ span {
color: red;
}
</style>
</head>
<body>
<div class="warp" id="wrap">
<span class="text1">1</span>
<span class="text2">2</span>
<span class="text3">3</span>
<span class="text4">4</span>
<span class="text5">5</span>
<span class="text6">6</span>
</div>
</body>
</html>埋凯。
最終結(jié)果:
- 對 + 而言，匹配的是——指定元素（.text2 選擇的元素)的下一個扫尖，能匹配 span 選擇器的兄弟元素白对。(也就是說下一個兄弟元素不是 p 標(biāo)簽，那匹配規(guī)則是不生效的换怖。)
- 而 ~ 則匹配的是——指定元素（.text4 匹配的元素）后的(所有)甩恼，能匹配 span 選擇器的兄弟元素。
說白了就是后一個和后多個的問題沉颂，二者都是對兄弟元素聲明規(guī)則媳拴，但不是對自己聲明規(guī)則。
優(yōu)先級計算
之前一直含糊的認(rèn)為兆览，優(yōu)先級是個數(shù)值屈溉，數(shù)值越大優(yōu)先級越高，其中一個id選擇器賦值1000抬探，類選擇器賦值100子巾，標(biāo)簽選擇器賦值1，含糊的累加計算來確定優(yōu)先級小压。
CSS3中選擇器的優(yōu)先級如下計算：
- 獲取選擇器中ID選擇器的個數(shù)线梗，賦值給a
- 獲取選擇器中類選擇器，屬性選擇器([type="text"])和偽類選擇器(:hover)的個數(shù)怠益，賦值給b
- 獲取選擇器中標(biāo)簽(type)選擇器和偽元素選擇器(::before)的個數(shù)仪搔，賦值給c
- 通用選擇器(*)不占優(yōu)先級權(quán)重
將abc三個數(shù)串聯(lián)成一個基數(shù)絕對大的數(shù)字(既無論數(shù)字再大也不進(jìn)位)。
#btn.red //a=1,b=1,c=0 =>specificity = 110
.big li //a=0,b=1,c=1 =>specificity = 11
ul li //a=0,b=0,c=2 =>specificity = 2
如果兩個specificity值一樣呢蜻牢？那自然是看樣式表中出現(xiàn)的先后順序烤咧，后者可以覆蓋前者的樣式偏陪。
給元素添加的內(nèi)聯(lián)樣式 (例如, style="font-weight:bold") 總會覆蓋外部樣式表的任何樣式 ，因此可看作是具有最高的優(yōu)先級（不包括!important）煮嫌。
!important除外
當(dāng)在一個樣式聲明上使用 !important 規(guī)則(雖然不鼓勵用)時笛谦，該樣式聲明會覆蓋CSS中任何其他的聲明(包括內(nèi)聯(lián)樣式)。
想要覆蓋 !important 只能再增加一條帶 !important 的 CSS 規(guī)則昌阿。
基于聲明形式的優(yōu)先級
<style>
//二者都是以 id 屬性做為辨識信息的選擇器饥脑，但是前者以 id 選擇器的形式，后者以屬性的形式聲明
#id{ color: "red";}
[id="milk"]{ color: "green"}
</style>
<div id="milk">牛奶</div>
最終這個div的color仍然是 red懦冰，因為 [id="milk"]是以屬性選擇器來添加權(quán)重的灶轰。
容易令人誤解的點
如下例子:
@question 這里兩個選擇器，前者對應(yīng)的優(yōu)先級值 假設(shè)是 0/0/2 后者不應(yīng)該是 0/1/1 嗎刷钢，按理后者優(yōu)先級更高笋颤，但是實際 span 標(biāo)簽的顏色 是 紅色的。
div span{
color:red;
}
div:first-child{
color:blue;
}
這是為什么呢闯捎？
實際上當(dāng)你在確定一個元素的樣式表時椰弊，首先要考慮的并不是優(yōu)先級许溅；只有當(dāng)同一個元素瓤鼻，有多個樣式聲明時，這時候考慮優(yōu)先級才有意義贤重。
請看如下例子:
<style>
#wrap {
color: red;
}
span {
color: blue
}
</style>
...
<body>
<div class="warp" id="wrap">
<span class="text1">233</span>
<span class="text3">text3</span>
<p>
<span class="text2">466</span>
</p>
</div>
這里的 span 元素的 color 會是什么顏色呢茬祷？
最終都是藍(lán)色。
這里的 color: red; 是屬于繼承而來的顏色并蝗，在 CSS 規(guī)則中直接作用于元素的 樣式聲明總是會 覆蓋 從祖先元素繼承而來的規(guī)則祭犯。
當(dāng)同一個元素有多個聲明的時候，優(yōu)先級才會有意義滚停。因為每一個直接作用于元素的CSS規(guī)則總是會接管/覆蓋（take over）該元素從祖先元素繼承而來的規(guī)則沃粗。來自MDN
參考閱讀：
