9-4重要性 · 初識HTML+CSS

我們在做網頁代碼的時，有些特殊的情況需要為某些樣式設置具有最高權值，怎么辦？這時候我們可以使用**!important**來解決。如下代碼： ~~~ p{color:red!important;} p{color:green;} <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p> ~~~ 這時 p 段落中的文本會顯示的red紅色。 **注意：!important要寫在分號的前面** 這里注意當網頁制作者不設置css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁。并且用戶也可以在瀏覽器中設置自己習慣的樣式，比如有的用戶習慣把字號設置為大一些，使其查看網頁的文本更加清楚。這時注意樣式優先級為：**瀏覽器默認的樣式 < 網頁制作者樣式 < 用戶自己設置的樣式**，但記住!important優先級樣式是個例外，權值高于用戶自己設置的樣式。 ### 任務 **任務：我也來試試，使用!important語句來改變樣式權重** 1.在右邊編輯器的第7行，相應位置插入`!important` 語句。這樣做的目的是也把第一段文字的顏色設置為紅色。 ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>!important</title> <style type="text/css"> p{color:red!important;} p.first{color:green;} </style> </head> <body> <h1>勇氣</h1> <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p> <p id="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很<span class="first">簡單</span>的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p> </body> </html> ```