CSS層疊
我們來(lái)思考一個(gè)問(wèn)題：如果在html檔案中對(duì)於同一個(gè)元素可以有多個(gè)css樣式存在並且這多個(gè)css樣式具有相同權(quán)重值怎麼辦？好，這一小節(jié)的層疊幫你解決這個(gè)問(wèn)題。
層疊就是在html檔案中對(duì)於同一個(gè)元素可以有多個(gè)css樣式存在，當(dāng)有相同權(quán)重的樣式存在時(shí)，會(huì)根據(jù)這些css樣式的前後順序來(lái)決定，處?kù)蹲钺崦娴腸ss樣式會(huì)被套用。
如下面程式碼:
p{color:red;}
p{color:green;}
<p class="first">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩。</p>最後 p 中的文字會(huì)設(shè)定為green，這個(gè)層疊很好理解，理解為後面的樣式會(huì)覆蓋前面的樣式。
所以前面的css樣式優(yōu)先權(quán)就不難理解了：
內(nèi)聯(lián)樣式表（標(biāo)籤內(nèi)部）> 嵌入樣式表（目前檔）> 外部樣式表（外部文件中）。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>層疊</title>
<style type="text/css">
p{color:red;}
p{color:green;}
p{color:pink;}
.first{ color:purple;}
#second{ color:orange;}
</style>
</head>
<body>
<h1>勇氣</h1>
<p class="first">三年級(jí)時(shí)，我還是一個(gè)<span>膽小如鼠</span>的小女孩，上課從來(lái)不敢回答老師提出的問(wèn)題，生怕回答錯(cuò)了老師會(huì)批評(píng)我。就一直沒(méi)有這個(gè)勇氣來(lái)回答老師提出的問(wèn)題。學(xué)校舉辦的活動(dòng)我也沒(méi)勇氣參加。</p>
<p id="second">到了三年級(jí)下學(xué)期時(shí)，我們班上了一節(jié)公開課，老師提出了一個(gè)很<span>簡(jiǎn)單</span>的問(wèn)題，班里很多同學(xué)都舉手了，甚至成績(jī)比我差很多的，也舉手了，還說(shuō)著："我來(lái)，我來(lái)。"我環(huán)顧了四周，就我沒(méi)有舉手。</p>
</body>
</html>
