有的時候我們為同乙個元素設定了不同的css樣式**,那麼元素會啟用哪乙個css樣式呢?下面我們一起來看一下**:
p
.first
class
="first"
>
三年級時,我還是乙個>
膽小如鼠span
>
的小女孩。p
>
p和.first都匹配到了p這個標籤上,那麼會顯示哪種顏色呢?green是正確的顏色,那麼為什麼呢?是因為瀏覽器是根據權值來判斷使用哪種css樣式的,權值高的就使用哪種css樣式。
下面是權值的規則:
標籤的權值為1,類選擇符的權值為10,id選擇符的權值最高為100。例如下面的**:
p
/*權值為1*/
p span
/*權值為1+1=2*/
.warning
/*權值為10*/
p span.warning
/*權值為1+1+10=12*/
#footer .note p
/*權值為100+10+1=111*/
注意:還有乙個權值比較特殊–繼承也有權值但很低,有的文獻提出它只有0.1,所以可以理解為繼承的權值最低。
>
>
charset
="utf-8"
>
>
特殊性title
>
type
="text/css"
>
p.first
/*因為權值高顯示為綠色*/
span
/*設定為粉色*/
p span
style
>
head
>
>
>
勇氣h1
>
class
="first"
>
三年級時,我還是乙個>
膽小如鼠span
>
的小女孩,上課從來不敢回答老師提出的問題,生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。p
>
"second"
>
到了三年級下學期時,我們班上了一節公開課,老師提出了乙個很簡單的問題,班裡很多同學都舉手了,甚至成績比我差很多的,也舉手了,還說著:"我來,我來。"我環顧了四周,就我沒有舉手。p
>
body
>
html
>
特殊性 權值
有的時候我們為同乙個元素設定了不同的css樣式 那麼元素會啟用哪乙個css樣式呢?我們來看一下面的 p first p class first 三年級時,我還是乙個 span 膽小如鼠 span 的小女孩。p p和.first都匹配到了p這個標籤上,那麼會顯示哪種顏色呢?green是正確的顏色,那麼...
margin值的特殊性
從2016年10月接觸前端,到現在大概1年多了吧,挺長的時間了,本以為自己的布局沒有問題,畢竟還是有專案經驗的,但是今天卻發現自己不是很懂margin,這個前端最常見的屬性之一,因此寫下這篇作為知識梳理。借鑑 css邊距屬性定義元素周圍的空間。通過使用單獨的屬性,可以對上 右 下 左的外邊距進行設定...
CSS3特殊性 權重值
是因為瀏覽器是根據權值來判斷使用哪種css樣式的,權值高的就使用哪種css樣式。下面是權值的規則 標籤的權值為1,類選擇符的權值為10,id選擇符的權值最高為100。例如下面的 下面,再來看一些例子吧?content div main content h2 三年級時,我還是乙個膽小如鼠的小女孩。最後...