在CSS中,權重指的是樣式規則應用于元素的優先程度。有些選擇器比其他選擇器更具優先級,并且當多個選擇器應用于同一元素時,具有更高權重的規則將覆蓋其他規則。
選擇器類型 權重值 --------------------------- !important 無窮大 內聯樣式 1000 ID選擇器 100 類選擇器,偽類選擇器,屬性選擇器 10 元素選擇器,偽元素選擇器 1 通配符,繼承,* 0
然而,在CSS選擇器中,權重的計算是由它們組合的方式來決定的。如果有多個選擇器應用于同一元素,則將權重值相加以確定哪個規則更加具有優先權。組合選擇器由不同的選擇器類型組合而成,它們的權重權值是它們各自權重權值的總和。
例子: p a ==>權重值為: 1+1 = 2 div .className ==>權重值為: 10+10 = 20 #divId >p ==>權重值為: 100+1 = 101
子元素選擇器是一種組合選擇器,用于選中元素子元素。它由兩個選擇器分別用">"符號連接而成。它將只匹配被選元素的直接子元素。
對于子元素選擇器,它的優先級相對較高,但它的權重仍然與選擇器類型的權重相同,并且與其他組合選擇器有著相同的權重。
例如: div >p ==>權重值為: 10+1 = 11 div p ==>權重值為: 10+1 = 11 div * ==>權重值為: 10+0 = 10
總體來說,在CSS中理解并正確計算權重是非常重要的,特別是在開發復雜的CSS應用程序或使用許多CSS庫和框架時。