CSS中的SPW是什么?SPW代表的是“Specificity Weight”,翻譯過來就是“特定性權重”。 在CSS的樣式選擇器中,選擇器的特定性級別就是指它的特定性權重。當多個選擇器都應用于同一個元素時,CSS會優先選擇特定性級別更高的樣式規則來應用。特定性級別的計算方式相當復雜,但可以簡單概括為:選擇器中每有一個ID選擇器給出100個特定性權重,每有一個類選擇器或屬性選擇器或偽類選擇器就給出10個特定性權重,每有一個元素選擇器就給出1個特定性權重。而通用選擇器、子選擇器、偽元素選擇器則不計算特定性權重。
這意味著如果有一個選擇器包含一個ID選擇器和一個元素選擇器,那么該選擇器的特定性權重就是“100+1=101”。而如果還有一個選擇器包含一個類選擇器和一個偽類選擇器,那么該選擇器的特定性權重就是“10+10=20”。因此,當同一個元素同時應用了這兩個選擇器里的樣式規則時,前者的樣式規則就會優先被應用。
/* 特定性級別為101 */ #nav {} nav {} /* 特定性級別為20 */ .menu-list:hover {} .menu-list.active {}
在實際開發中,理解特定性權重的計算方式以及靈活使用樣式選擇器來提高特定性級別,是撰寫高效、可維護 CSS 的關鍵技能之一。
上一篇CSS中盒子陰影過渡