在CSS中,權重是用來決定樣式優先級的一個重要概念。當多個選擇器應用到同一個元素時,權重越高的選擇器將會覆蓋權重較低的選擇器。我們可以通過以下幾種方式來改變選擇器的權重。
/* ID選擇器 */ #element { /* 權重為100 */ } /* 類選擇器、屬性選擇器、偽類 */ .class, [type="text"], :hover { /* 權重為10 */ } /* 元素選擇器、偽元素 */ div, ::after { /* 權重為1 */ } /* 通配符、組合器、繼承 */ *, >, +, ~, inherit { /* 權重為0 */ }
可以看到,ID選擇器的權重最高,為100,而通配符、組合器和繼承的權重最低,為0。因此,在編寫CSS時,我們應該盡可能使用類選擇器、屬性選擇器、偽類和元素選擇器,避免使用ID選擇器,除非必要時才使用。同時還可以通過組合選擇器來提高權重。
/* 帶有類選擇器的權重為11 */ .class #element { /* 權重為111 */ } /* 帶有偽類的權重為21 */ #element:hover { /* 權重為121 */ } /* 多個類選擇器的權重為20 */ .class1.class2 { /* 權重為20 */ } /* 多個屬性選擇器的權重為20 */ [type="text"][name="username"] { /* 權重為20 */ }
通過上述創建CSS規則的方式,我們可以控制樣式的優先級和權重,確保頁面的樣式表現符合預期并避免與其他樣式沖突。