9-2特殊性 · 初識HTML+CSS

有的時候我們為同一個元素設置了不同的CSS樣式代碼，那么元素會啟用哪一個CSS樣式呢?我們來看一下面的代碼： ~~~ p{color:red;} .first{color:green;} <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p> ~~~ p和.first都匹配到了p這個標簽上，那么會顯示哪種顏色呢？green是正確的顏色，那么為什么呢？是因為瀏覽器是根據權值來判斷使用哪種css樣式的，權值高的就使用哪種css樣式。下面是權值的規則： **標簽的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。**例如下面的代碼： ~~~ p{color:red;} /*權值為1*/ p span{color:green;} /*權值為1+1=2*/ .warning{color:white;} /*權值為10*/ p span.warning{color:purple;} /*權值為1+1+10=12*/ #footer .note p{color:yellow;} /*權值為100+10+1=111*/ ~~~ **注意：還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權值最低。** ***** ## [.first的優先級大于 p span的優先級，為什么會變成紫色？](https://www.imooc.com/qadetail/327373) #### p span{}本身的權值確實是2，但是.first對膽小如鼠這四個字的影響力只有繼承的權值，為0.1。所以2>0.1 #### ### 任務 **我來試一試：為“膽小如鼠”這幾個文本設置顏色為紫色** 要求：為“膽小如鼠”這幾個文本設置權值更高的CSS樣式代碼來覆蓋以前的CSS樣式代碼在第11行輸入下面的代碼： ~~~ p span{color:purple;} ~~~ 或 ~~~ p>span{color:purple;} ~~~ ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>特殊性</title> <style type="text/css"> p{color:red;} .first{color:green;}/*因為權值高顯示為綠色*/ /*權值為10*/ span{color:pink;}/*設置為粉色*/ p span{color:purple;}/*權值為1+1=2*/ </style> </head> <body> <h1>勇氣</h1> <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p> <p id="second">到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班里很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p> </body> </html> ```