CSS選擇器優(yōu)先是指在CSS樣式中,當(dāng)多個選擇器對同一元素指定了不同的樣式時,如何決定使用哪種樣式的問題。下面介紹幾種不同的CSS選擇器,以及它們的優(yōu)先級。
1. ID選擇器的優(yōu)先級最高:#id,如 #header{} 2. 類選擇器和屬性選擇器:.class、[data-attribute],如 .intro、[href] {} 3. 元素選擇器和偽類選擇器:p、:hover,如 p{}、:hover{} 4. 通配符選擇器*、子選擇器>、相鄰兄弟選擇器+、一般兄弟選擇器~,如 *{}、a>span{}、h1+p{}、h1~p{}。
選擇器的優(yōu)先級是根據(jù)“就近原則”來確定的,先匹配離當(dāng)前元素最近的選擇器,然后逐級向上匹配父元素,從而確定最終應(yīng)用的樣式。
當(dāng)多個選擇器對同一元素指定了不同的樣式時,優(yōu)先級的比較方式為:先比較ID選擇器,再比較類/屬性選擇器,再比較元素/偽類選擇器,最后比較通配符選擇器及各種組合選擇器。
如果兩個選擇器的優(yōu)先級相同,那么就近原則仍然適用,后定義的樣式將覆蓋先定義的樣式。
在實際開發(fā)中,我們應(yīng)該充分利用CSS選擇器的優(yōu)先級,靈活組合各種選擇器,以最小的代價實現(xiàn)最大的效果。