CSS層疊
我們來思考一個問題:如果在html文件中對于同一個元素可以有多個css樣式存在并且這多個css樣式具有相同權(quán)重值怎么辦?好,這一小節(jié)中的層疊幫你解決這個問題。
層疊就是在html文件中對于同一個元素可以有多個css樣式存在,當(dāng)有相同權(quán)重的樣式存在時,會根據(jù)這些css樣式的前后順序來決定,處于最后面的css樣式會被應(yīng)用。
如下面代碼:
p{color:red;} p{color:green;} <p class="first">三年級時,我還是一個<span>膽小如鼠</span>的小女孩。</p>
最后 p 中的文本會設(shè)置為green,這個層疊很好理解,理解為后面的樣式會覆蓋前面的樣式。
所以前面的css樣式優(yōu)先級就不難理解了:
內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部)> 嵌入樣式表(當(dāng)前文件中)> 外部樣式表(外部文件中)。
<!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">三年級時,我還是一個<span>膽小如鼠</span>的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學(xué)校舉辦的活動我也沒勇氣參加。</p> <p id="second">到了三年級下學(xué)期時,我們班上了一節(jié)公開課,老師提出了一個很<span>簡單</span>的問題,班里很多同學(xué)都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環(huán)顧了四周,就我沒有舉手。</p> </body> </html>