css 多重樣式

2022-03-08 14:43:40 字數 2392 閱讀 4830

1.乙個div中既有class又有id

2.乙個div中有多個class

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

style

type

="text/css"

>

.red

.blue

style

>

head

>

<

body

>

<

div

class

="red blue"

>

hello

div>

body

>

html

>

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

style

type

="text/css"

>

.blue

.red

style

>

head

>

<

body

>

<

div

class

="red blue"

>

hello

div>

body

>

html

>

3.偽類選擇器與class

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

/>

<

style

type

="text/css"

>

/*下邊執行順序不影響結果

*/.red

.red>div:first-child

/*作用域第1

*/.red>div

/*作用域第2

*/.green

/*作用域第3

*/style

>

head

>

<

body

>

<

div

class

="red"

>

<

div

class

="green"

>

hello

div>

div>

body

>

html

>

總結一下:作用力排名

第一名:id

第二名:偽類選擇器(裡邊還有比較)

第三名:class(多個class,以css定義最後那個為準)

多重樣式優先順序深入概念

優先順序是瀏覽器是通過判斷哪些屬性值與元素最相關以決定並應用到該元素上的。優先順序僅由選擇器組成的匹配規則決定的。優先順序就是分配給指定的css宣告的乙個權重,它由匹配的選擇器中的每一種選擇器型別的數值決定。下列是乙份優先順序逐級增加的選擇器列表 當 important 規則被應用在乙個樣式宣告中時...

css多重邊框

一 使用box shadow實現多重邊框 html div class multiple div css multiple效果圖 值得說明的是,box shadow是層層疊加的,第一層投影位於最頂層,依次類推。因此你需要按照此規律擴張半徑。比如上面的 如果我們想在外層在加乙個5px的外框,那麼久需要...

css背景樣式css背景樣式

css背景樣式 css背景樣式 序號中文說明 標記語法 1背景顏色2背景 3背景重複 4背景固定 5背景定位 6背影樣式 1 背景顏色 background color 語法 說明 引數取值和顏色屬性一樣 注意 在 html當中,要為某個物件加上背景色只有一種辦法,那就是先做乙個 在 中設定完背景色...