CSS的層次等級是指不同選擇器的權重優先級,它們決定了在同一元素上不同樣式的應用先后順序。當多個樣式同時應用在同一個元素上時,權重最高的樣式會被優先應用。
權重等級: !important 行內樣式(style) ID選擇器(#id) 類選擇器(.class)/ 屬性選擇器([attribute=value]) 元素選擇器(element) 偽類選擇器(:hover, :focus等) 通配符選擇器(*) 繼承
其中最高的是!important聲明,它在任何情況下都優先于其他樣式。其次為行內樣式,即在標簽上使用style屬性定義的樣式。ID選擇器和類選擇器/屬性選擇器的優先級相同,但ID選擇器的特殊性更高,因為ID應該是唯一的。元素選擇器的特殊性較低,當所有規則耗竭完畢,還沒有明確的勝者,元素選擇器的樣式才會應用。偽類選擇器通常用于指定特定狀態的元素(如:hover狀態下的鏈接),它的權重優先級高于元素選擇器,但低于類選擇器/屬性選擇器。通配符選擇器的權重最低,它會應用到所有元素上。
當選擇器具有相同的權重時,CSS會依據就近原則來應用樣式。如果一個樣式聲明出現在style標簽中,而另一個出現在外部CSS文件中,則前者會優先應用。如果兩個樣式規則聲明位置相同,那么就會根據它們在代碼中出現的先后順序來決定優先級。
上一篇css提取顏色代碼
下一篇css提供了哪幾種選擇器