App下載

CSS選擇器優(yōu)先級權重

猿友 2021-03-17 14:33:49 瀏覽數(shù) (6269)
反饋

CSS 的選擇器是必學內(nèi)容,多種選擇器都有各自的用法,本篇文章來為您介紹選擇器的優(yōu)先級。

一、優(yōu)先級的分類

我們可以把 CSS 的優(yōu)先級從高到低來分成6級:

第一級別:無優(yōu)先條件的屬性我們只要在屬性后添加 ?!important ?即可。這個屬性可以覆蓋此頁面所有位置定義的同種元素樣式。

第二級別:在元素標簽內(nèi)直接添加 style ,俗稱內(nèi)聯(lián)樣式。

第三級別:ID 選擇器。例:#id{color:red;}

第四級別:類選擇器,屬性選擇器或者偽類選擇器。例:.one{color:blue;}

第五級別:元素選擇器。例:div{color:yellow;}

第六級別:統(tǒng)配選擇器。例:*{color:green;}

二、選擇器的權重和優(yōu)先規(guī)則

CSS 會依據(jù)選擇器其特殊性質(zhì)來規(guī)定它定義的樣式權重次序,在更特殊的選擇器權重優(yōu)先于一般選擇器的規(guī)則。如果有兩個相同特殊性的選擇器,那么后面定義的選擇器優(yōu)先。

如何去計算選擇器的特殊性?我們來試著計算一下選擇器的權重,如下圖:

選擇器權重

如圖所示,我們把選擇器特殊性分為4個等級,每個等級是一種選擇器,每個等級的值加起來就是該選擇器的權重。

四個等級定義如下:

第一級:內(nèi)聯(lián)樣式,例:style="",它的權值為1000

第二級:ID選擇器,例:#id,它的權值為100

第三級:class選擇器,例:.one,它的權重為10

第四級:元素選擇器,例:div,p,h1 ,它的權重為1


以上就是為大家整理的關于CSS選擇器權重優(yōu)先規(guī)則。


CSS

0 人點贊