Css權重問題

一、樣式分類

樣式分為內聯樣式，外聯樣式，行內樣式三種。

二、樣式權重

那麼它們的權重都是多少呢，咱們來看看

1、1000 - 行內樣式（<div stylex="color: red;"></div>）

2、0100 - id選擇器（#content）

3、0010 - class類選擇器（.content），偽類選擇器（:before），屬性選擇器（[type="text"]）

4、0001 - 類型選擇器（div），偽元素選擇器（::before）

5、0000 - 通配符（*），子選擇器（>），相鄰選擇器（+）等

6、繼承的樣式沒有權重

三、比較規則

1、樣式權重的比較是將1000這四個字元，從左向右依次比較，而不是直觀的認為行內樣式>id>class

2、權重相同，後面的樣式會覆蓋前面的樣式

3、通配符，子選擇器，相鄰選擇器等雖然權重只有0000，但是也比繼承的樣式優先順序高

4、!important的作用是提升優先順序，提升後樣式優先順序比行內元素高

!important的兼容性，ie7+以上都無問題；ie6上有一些小bug

// ie6
p {
color: blue!important;
color: red;
}
// red

p {color: blue!important;}
p {color: red;}
// blue


推薦閱讀：