學習《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,所以可以理解爲繼承的權值最低。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章