9-3層疊 · 初識HTML+CSS

我們來思考一個問題：如果在html文件中對于同一個元素可以有多個css樣式存在并且這多個css樣式具有**相同權重值**怎么辦？好，這一小節中的層疊幫你解決這個問題。 **層疊**就是在html文件中對于同一個元素可以有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的前后順序來決定，處于最后面的css樣式會被應用。如下面代碼: ~~~ p{color:red;} p{color:green;} <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p> ~~~ 最后 p 中的文本會設置為green，這個層疊很好理解，理解為后面的樣式會覆蓋前面的樣式。所以前面的css樣式優先級就不難理解了： **內聯樣式表（標簽內部）> 嵌入樣式表（當前文件中）> 外部樣式表（外部文件中）**。 ### 任務 **我也來試一試：使用層疊的方式設置兩段文字顏色為粉色** **1、在右側代碼編輯器中的第9行輸入：** ~~~ p{color:pink;} ~~~ ``` <!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;} </style> </head> <body> <h1>勇氣</h1> <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p> <p id="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很<span>簡單</span>的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p> </body> </html> ```