CSS選擇器優先級是指瀏覽器在應用多個樣式規則時,確定哪條規則應該被應用。優先級由四個組成部分:內聯樣式、ID選擇器、類選擇器和標簽選擇器。在同一個選擇器組中,每個選擇器的優先級都是一樣的。
/* 以下是一個例子 */ #my-id { color: red; } .my-class { color: blue; } p { color: green; }
內聯樣式的優先級最高,因為它被明確地指定在HTML標簽上。其次是ID選擇器的優先級,因為每個ID只能在文檔中出現一次。然后是類選擇器和標簽選擇器,它們的優先級相同。
如果多個選擇器具有相同的優先級,那么后面出現的樣式規則將覆蓋前面的規則。
/* 以下是一個例子 */ p { color: green; } p { color: red; } /* 最終的樣式是紅色 */
如果需要計算優先級,可以按照以下規則:
- 對每個內聯樣式,賦值一個“1”。
- 對每個ID選擇器,賦值一個“100”。
- 對每個類選擇器和屬性選擇器,賦值一個“10”。
- 對每個標簽選擇器和偽元素,賦值一個“1”。
- 將所有值相加。
/* 以下是一個例子 */ #my-id { color: red; } .my-class { color: blue; } p { color: green; } /* 計算優先級為:100(ID選擇器) + 10(類選擇器) + 1(標簽選擇器) = 111 */
在選擇器優先級的比較中,也可以使用!important規則來改變優先級。使用!important規則的樣式規則具有最高優先級,不受其他選擇器優先級的影響。
/* 以下是一個例子 */ p { color: green!important; } /* 這個樣式規則的優先級比其他樣式規則都要高 */
總之,在編寫CSS時,請注意選擇器優先級,以確保樣式規則能夠正確應用。
上一篇凹凸世界css搞事情小隊
下一篇內聯樣式的css