層疊
聲明沖突：同一個(gè)樣式，多次應(yīng)用到同一個(gè)元素
比如現(xiàn)在實(shí)現(xiàn)弦叶，鼠標(biāo)移動(dòng)在一個(gè)鏈接的時(shí)候?qū)崿F(xiàn)增加背景顏色谤祖，變換字體顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
color: #f40;
width: 20px;
padding: 0 5px;
text-decoration: none;
font-style: italic;
}
a:hover{
color: #fff;
background-color: #f40;
}
</style>
</head>
<body>
<a href="">Lorem.</a>
<a href="">Cupiditate?</a>
<a href="">Sequi!</a>
<a href="">Sint?</a>
<a href="">Corporis?</a>
<a href="">Iste.</a>
<a href="">Laborum!</a>
<a href="">Excepturi?</a>
<a href="">Cum?</a>
<a href="">Beatae?</a>
</body>
</html>
層疊：解決聲明沖突的過程兄世，瀏覽器自動(dòng)處理（權(quán)重計(jì)算）
1、比較重要性
重要性從高到低：
1） 作者樣式表中的 !important樣式
例如上面的代碼中如果增加后
a {
color: #f40 !important;
width: 20px;
padding: 0 5px;
text-decoration: none;
font-style: italic;
}
a:hover{
color: #fff;
background-color: #f40;
}
頁面樣式也會(huì)改變
2）作者樣式表中的普通樣式
3）瀏覽器默認(rèn)樣式表
2邻薯、比較特殊性
看選擇器
總體規(guī)則：選擇器選中的范圍越窄裙戏，越特殊
具體規(guī)則：通過選擇器，計(jì)算出一個(gè)4位數(shù)（ x x x x ）
1厕诡、千位：如果是內(nèi)聯(lián)樣式累榜，則為1，否則為0
2灵嫌、百位：等于選擇器中所有id選擇器的屬性
3壹罚、十位：等于選擇器中所有類選擇器、屬性選擇器寿羞、偽類選擇器的數(shù)量
4猖凛、個(gè)位：等于選擇器中所有元素選擇器、偽元素選擇器的數(shù)量
個(gè)位數(shù)進(jìn)制是256位進(jìn)1的绪穆，所以可以忽略累加進(jìn)制問題
3辨泳、比較源次序
代碼書寫靠后的勝出
應(yīng)用
1、重置樣式表
書寫一些作者樣式玖院，覆蓋瀏覽器的默認(rèn)樣式
重置樣式表->瀏覽器默認(rèn)樣式
一些常見的重置樣式表：normalize.css菠红、reset.css、meyer.css
2难菌、愛恨法則
link > visited > hover > active
