css選擇器的優先順序和權重問題

2021-08-28 04:49:17 字數 1076 閱讀 5460

css選擇器的種類:

1.id選擇器如:(id=」name」,id=」name_txt)(*name)

2.class選擇器(如:class=」head」,class=」head_logo」)(#head)

3.標籤選擇器(如:body,div,p,h1,form)

4.全域性選擇器(如:*號)

5.組合選擇器(如:.head .head_logo,注意兩選擇器用空格鍵分開)

6.繼承選擇器(如:div p,注意兩選擇器用空格鍵分開)

css的優先順序

選擇器的優先順序分為兩種情況,第一種是選擇器在同一級別的情況下,第二種是選擇器在不同級別的情況下

不同選擇器級別:

1.在屬性後面使用 !important 會覆蓋頁面內任何位置定義的元素樣式。

作為style屬性寫在元素內的樣式

2.id選擇器

3.類選擇器

4.標籤選擇器

5.萬用字元選擇器

6.瀏覽器自定義或繼承

總結:!important > 行內樣式》id選擇器 > 類選擇器 > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設屬性

2.同一級別的選擇器的優先順序:

同一級別中後寫的會覆蓋先寫的樣式

css選擇器的權重分析:

第一等:代表 內聯樣式,如: style=」」,權值為:1000。

第二等:代表 id選擇器,如:#content,權值為:0100。

第三等:代表 類,偽類和屬性選擇器,如: .content , :hover , [type="text"] 權值為:0010。

第四等:代表 標籤選擇器和偽元素選擇器,如: p ,::first-line 權值為:0001。

萬用字元、子選擇器、相鄰選擇器等的。如: *、>、+,權值為:0000。

繼承的樣式沒有權值,通配選擇器定義的規則優先順序高於元素繼承過來的規則的優先順序。

最後比較特殊的乙個標誌!important(權重),它沒有特殊性值,但它的優先順序是最高的,為了方便記憶,可以認為它的特殊性值為1,0,0,0,0。

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 繼承的樣式 沒有優先...