css選擇器的優先順序比較

2021-07-26 02:43:31 字數 766 閱讀 3638

我們都知道css中有三大特性:

css的全稱是cascading style sheets,意思是層疊樣式表,這裡的層疊就重點的說了css的特性,如果兩個選擇器為同乙個元素設定了相同的屬性,它們會發生層疊。而層疊的樣式又是由優先順序來決定的。

這個優先順序是個很值得**的問題。經過學習,我總結了一些優先順序的判斷方法。

如果是單個標籤,那麼優先順序是這樣的:

!important > 行內樣式 > id > class > 標籤 > 萬用字元 > 繼承 > 瀏覽器預設

*這裡要注意: !important 不能繼承,只適用於當前標籤。

如果是復合選擇器 ,那麼優先順序的就要靠權重來計了。

權重計算規則如下:

第一等:代表內聯樣式,如: style=」」,權值為1000。

第二等:代表id選擇器,如:#content,權值為0100。

第三等:代表類,偽類和屬性選擇器,如.content,權值為0010。

第四等:代表型別選擇器和偽元素選擇器,如div p,權值為0001。

萬用字元、子選擇器、相鄰選擇器等的。如*、>、+,權值為0000。

繼承的樣式沒有權值。

是不是看起來有點暈。那麼我們來總結一種簡單一點的方法:

看id, class和標籤的數量(不看混合順序,但一定要命中對應標籤)。

方法:先比id數,再比class數,最後再比標籤數。

規則:權重值:id > class > 標籤

)如果權重也一樣,那麼還遵從後面的覆蓋前面的這個規則。

CSS選擇器優先順序比較

css選擇器中比較常見的有標籤選擇器 id選擇器 類選擇器以及子選擇器。而事實上,css選擇器如果細分下來,竟然多達40多種。那麼當我們在碰到通過多種形式對同乙個元素進行設定樣式時的情況時,如果不進行測試,如何 其最終結果呢?以下是選擇器的優先規則 1 important id class 標籤 2...

選擇器優先順序 CSS選擇器優先順序總結

css選擇器優先順序這個問題,相信有點經驗前端都會認為非常簡單,但是我們今天還是來總結一下吧。相信大家應該很少直接在html頁面寫樣式吧,一般都是用link標籤匯入css樣式表。使用者自定義樣式表就是我們用link標籤引入的css樣式表,為了保持不同瀏覽器下樣式相同,所以我們的自定義樣式表一般都會覆...

CSS 選擇器優先順序

css優先順序包含四個級別 文內選擇器,id選擇器,class選擇器,元素選擇器 以及各級別出現的次數。根據這四個級別出現的次數計算得到css的優先順序。css優先順序的計算規則如下 頁面中直接設定style,加1,0,0,0 每個id選擇器 如 id 加0,1,0,0 每個class選擇器 如 c...