權值計算 特殊性

2021-10-09 15:48:13 字數 1361 閱讀 4782

有的時候我們為同乙個元素設定了不同的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 三年級時,我還是乙個膽小如鼠的小女孩。最後...