在CSS中,我們定義樣式時常常使用選擇器來選定需要樣式化的元素。但在一個HTML文檔中,同一個元素可能被多重選擇器同時選定,這時我們就需要了解選擇器的權(quán)重(Specificity),以確定最終的樣式。
選擇器的權(quán)重是由四個數(shù)字組成,分別為行內(nèi)樣式、ID選擇器、class選擇器和標簽選擇器。它們的權(quán)重從高到低排列:行內(nèi)樣式>ID選擇器>class選擇器>標簽選擇器。如果兩個選擇器的權(quán)重相同,則后面的那個會覆蓋前面的。
/* 權(quán)重為0-0-0-1 */ p { color: red; } /* 權(quán)重為0-0-1-0 */ .my-class { color: blue; } /* 權(quán)重為0-1-0-0 */ #my-id { color: green; } /* 權(quán)重為1-0-0-0 */Hello World!
上面的例子中,行內(nèi)樣式的權(quán)重最高,所以最終Hello World文本的顏色是黑色的。如果沒有行內(nèi)樣式的話,則ID選擇器的權(quán)重最高,所以如果class和標簽選擇器和ID選擇器同時作用于同一個元素時,ID選擇器的樣式將覆蓋其他選擇器。
最后簡單說一下!important規(guī)則,它能讓某個樣式屬性的優(yōu)先級變得最高,即使該樣式被其他選擇器設(shè)定了較高的權(quán)重。但是,在實際開發(fā)中,我們應(yīng)該盡量少用!important規(guī)則,以避免樣式的混亂和不可維護性。