css 樣式的繼承與選擇器的權重

2021-10-08 04:00:38 字數 2190 閱讀 8630

0x02 選擇器的權重

樣式的繼承就是我們為乙個元素設定的樣式同時會應用到它的後代元素上.可以看出樣式的繼承是發生在祖先與後代之間的。

繼承的設計是為了方便我們開發,利用樣式的繼承我們可以將一些通用的樣式統一設定到共同的祖先元素上,那麼設定一次所有的後代元素都具有該樣式。

我是乙個p元素

>

我是p元素中的spanspan

>

p>

>

我是p元素外的spanspan

>

>

我是div

>

我是div中的span

>

我是span中的emem

>

span

>

div>

body

>

html

>

當我們通過不同的選擇器,選中相同的元素,並且為相同的樣式設定不同的值時,此時就發生了樣式的衝突。發生樣式衝突時,應用哪個樣式由選擇器的權重(優先順序)決定。

選擇器權重

內聯樣式

1,0,0,0

id選擇器

0,1,0,0

類和偽類選擇器

0,0,1,0

元素選擇器

0,0,0,1

通配選擇器

0,0,0,0

繼承的樣式

沒有優先順序

說明:

1.

0,0,0,0

:左邊是高位,右邊是低位,**中權重的大小由高到低依次排列

2.比較優先順序時,需要將所有的選擇器的優先順序進行相加計算,最後優先順序越高,則越優先顯示(分組選擇器是單獨計算的)

3.選擇器的累加不會超過其最大的數量級,類選擇器在高也不會超過id選擇器

4.如果優先順序計算後相同,此時則優先使用靠下的樣式,即下方的**會將上方的**效果覆蓋

5.可以在某乙個樣式的後邊新增 !important ,則此時該樣式會獲取到最高的優先順序,甚至超過內聯樣式,

注意:在開發中!important一定要慎用!

**演示1.比較優先順序時,需要將所有的選擇器的優先順序進行相加計算,最後優先順序越高,則越優先顯示

>

>

/* 權重:0,1,0,1 */

div#box1

/* 權重:0,1,0,0 */

#box1

style

>

head

>

>

"box1"

>

我是乙個div

>

我是div中的spanspan

>

div>

body

>

**演示2.樣式的繼承沒有優先順序

>

>

span

divstyle

>

head

>

**演示3.

可以在某乙個樣式的後邊新增 !important ,則此時該樣式會獲取到最高的優先順序

>

#box1

divstyle

>

本文到此結束!

CSS選擇器,繼承,層疊,權重

這節主要講css選擇器 最常用的有兩種選擇器 1 型別選擇器 也稱為元素選擇器 p 2 後代選擇器 兩者之間加空格 first span 通用選擇器 萬用字元 css3選擇器 子選擇器 相鄰同袍選擇器 屬性選擇器 偽類 love hate link visited hover active css的...

css選擇器 權重

基礎選擇器 一 標籤選擇器 p h1 css不區分大小寫,建議小寫 1 所有的標籤都可以作為標籤選擇器去使用 2 無論這個標籤藏多深,一定能夠被選上 3 選擇頁面所有的,而不是具體某乙個 標籤選擇器,選擇的是頁面上所有這種型別的標籤,所以經常描述 共性 無法描述某乙個元素的 個性 的。二 id選擇器...

CSS 樣式 選擇器 繼承 tag

1.css主要是用於定義html內容在瀏覽器內的顯示樣式,如文字大小 顏色 字型加粗等,如 2.內聯式css樣式表就是把css 直接寫在現有的html標籤中,如下面 這裡文字是紅色。3.嵌入式css樣式,就是可以把css樣式 寫在標籤之間 4.外部式css樣式 也可稱為外聯式 就是把css 寫乙個單...