css 選擇器優先順序權重 元素顯示模式

2021-10-05 15:19:10 字數 720 閱讀 5726

選擇器優先順序-權重

繼承 或者 * 0,0,0,0

元素選擇器 0,0,0,1

類選擇器,偽類選擇器 0,0,1,0

id選擇器 0,1,0,0

行內樣式style="" 1,0,0,0

!important 重要的 無窮大

1, 看繼承 有繼承 pass

2, 誰的級別高聽誰的

3, 都有高階別, 比個數

4, 所有級別個數相同的情況下, 就近原則

元素顯示模式

行內inline

一行多個

不能直接設定高寬

預設高寬是內容

span,a,strong…

特殊 a標籤

不能巢狀a

可以巢狀塊元素

塊block

一行乙個

可以直接設定高寬

必須設定高度

有內容可以撐起盒子

不設定寬度預設是父級元素的寬度

div,p,h1-6,ul,ol,li

p和h系列,一般只放文字

行內塊inline-block

一行多個可以設定高度

會有空隙

img,input,td

更換顯示模式

display

總結的操作技術

側邊欄a標籤跳轉

轉塊文字垂直居中

單行文字

height=line-height

CSS 選擇器優先順序(權重)

請問div的背景顏色為紅色還是綠色呢?lang en charset utf 8 documenttitle divstyle head style background color green div body html 答案為綠色。為什麼會是綠色呢?難道存在 執行的先後的覆蓋問題?請看第二個問題...

CSS 選擇器權重(優先順序)

計算指定選擇器的優先順序 重新認識css的權重 important 加1,0,0,0 id 選擇器 如 id 加0,1,0,0 class 類選擇符 如 class 每個屬性選擇符 如 attribute 每個偽類 如 hover 加0,0,1,0 元素選擇符 如p 或偽元素選擇符 如 firstc...

18 選擇器權重(優先順序)

樣式的衝突 當我們通過不同的選擇器,選中相同的元素時,並且為相同的樣式設定不同的值時,此時就發生了樣式的衝突 發生樣式衝突時,應用哪個樣式由選擇器的權重 優先順序 決定 選擇器的權重 內聯樣式 1000 id選擇器 100 類和偽元素選擇器 10 元素選擇器 1 通配選擇器 0 繼承的樣式 沒有優先...