CSS中選擇器的權重等級和樣式的優先順序

2021-10-23 02:30:49 字數 1018 閱讀 4021

css中的樣式選擇器可以分為5類:內聯樣式;id選擇器;類、屬性和偽類選擇器;元素和偽元素選擇器;萬用字元選擇器。每種選擇器都有乙個權重值,瀏覽器根據選擇器的權重值,確定樣式的優先順序。

直接在html文件中定義的樣式,對元素產生直接作用,例如:

我是乙個內聯樣式

我是乙個id選擇器

包括各種class、屬性選擇器、偽類選擇器,例如:.red,[type=text],:hover等。

元素選擇器,例如:div,span,a等。

偽元素選擇器,例如:::after,::before,::first-letter,::first-line,::section等。

例如:div * {} 等。

權重的等級高低:內聯樣式選擇器 > id選擇器 > 類、屬性和偽類選擇器 > 元素和偽元素選擇器 > 萬用字元選擇器。

計算中可以假定:乙個行內樣式+1000,乙個id選擇器+100,乙個類、屬性或者偽類選擇器+10,乙個元素或者偽元素選擇器+1。例如:

body #content .data img:hover {}
#content是乙個id選擇器,權重+100;.data是乙個類選擇器,權重+10;:hover是乙個偽類選擇器,權重+10;body和img是元素選擇器,權重+2。最終的權重是100 + 20 + 2 = 122。

#div1 

.div1

#div1的權重為100,.div1的權重為10。因此,#div1的優先順序高,#div1定義的樣式生效,最終結果為color: red;

假如在樣式表中,同乙個css規則寫了兩次,那麼後面的樣式規則會生效:

#content div1 

#content div1

這兩個選擇器的權重都是 11,優先順序一樣高,後面定義的樣式生效,最終結果為padding: 10px;

CSS中選擇器的權重值

css 具有自己的優先順序計算方法,而不僅僅是行間 內部 外部 id class 元素 選擇器 栗子id id class.class 標籤p 屬性 type text 偽類 hover 偽元素 first line 相鄰選擇器 子代選擇器 內聯樣式,如 style 權值為1000。id選擇器,如 ...

CSS中選擇器 字型樣式屬性

p.bulep標籤中的字型顏色設為藍色 h2 size20px 萬用字元選擇器設定的樣式對所有的html標記都起作用。標記名 style 屬性1 屬性值1 屬性2 屬性值2 屬性3 屬性值3 內容 內嵌式是將css 集中寫在html文件的head頭部標記中,且在title標記之後 將css樣式寫在乙...

CSS 樣式中選擇器型別區別

css 樣式中選擇器型別區別 css 樣式中選擇器型別有三種 類 標籤 高階 1 類 的一種樣式可以改變 類 的另一種樣式,類 的一種樣式也可以改變 標籤 的一種樣式。2 標籤 設定完可以改變所有預設樣式的,不能改變已設定 類 的樣式和 高階 的樣式 3 高階 的樣式改變所有預設樣式和已設定 類 的...