CSS選擇器的優先順序

2021-10-03 02:51:21 字數 472 閱讀 2990

當使用不同的選擇器,選中同乙個元素時並且設定不同的樣式;這時就會產生衝突,最終到底採用那乙個選擇器定義的樣式,有選擇器的優先順序決定,優先順序高的優先顯示。

優先順序的規則:

選擇器優先順序內聯樣式

1000

id選擇器

100類和偽類

10元素選擇器

1通配選擇器

0繼承的樣式

沒有優先順序

當選擇器中包含較多選擇器時,需要將多種選擇器的優先順序相加然後再進行比較(並集選擇器是單獨計算的,不會相加)。但是注意,選擇器優先順序相加不會超過他的最大數量級。比如id選擇器相加不會到達1000(也就是說id多個選擇器相加也不會超過內聯樣式的優先順序)。

如果選擇器的優先順序相同時,使用靠後的樣式。

在樣式的最後新增乙個 ! important,此時該樣式將會獲得乙個最高的優先順序,將會優先於所有樣式(包括內聯樣式)。但在開發中應該盡量避免使用。

選擇器優先順序 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...

css選擇器優先順序

css優先順序即css樣式在瀏覽器中被解析出來的先後順序。css優先順序包含四個級別 行內樣式,id選擇符,class類選擇符,元素選擇符 以及各級別出現的次數。繼承是css的乙個主要特徵,然後繼承的權重很低,比普通元素還要低。1.行內樣式 類似css 的樣式 的優先順序為1,0,0,0,始終高於外...