CSS選擇器優先順序概括

2021-10-07 00:16:40 字數 900 閱讀 4703

在css中,我們使用選擇器選擇特定的元素然後對元素中內容新增樣式,但是有時候多個選擇器可能同時選擇乙個元素,比如乙個元素同時被類選擇器和元素選擇器同時選擇,這時我們就需要依靠元素選擇器來判斷應該使用哪乙個選擇器。

首先了解一些簡單概念:

繼承:即子類元素繼承父類的樣式;

1.元素選擇器(如:div,p,ul,li,span)

2.類選擇器(如:class=「class1」)

3.id選擇器(如:id=「name」,)

4.全域性選擇器(如:*號)

5.交集選擇器(如:.class1.class2注意兩選擇器用空格鍵分開)

6.後代選擇器 (如: ul li 從父集到子孫集的選擇器)

7.並集選擇器 div,span,img 即具有相同樣式的標籤分組顯示

8.繼承選擇器(如:div p,注意兩選擇器用空格鍵分開)

10.字串匹配的屬性選擇符(^ =$= *=三種,分別為開始、結尾、包含)

11.子選擇器 (如:div>p ,帶大於號》)

12.css 相鄰兄弟選擇器器 (如:h1+p,帶加號+)

內聯選擇器》id選擇器》類選擇器》元素選擇器》通用選擇器

(1)最高:在元素樣式後面加上 !important如color:red !i,mportant;

(2)第二高:使用內聯選擇器

(3)其他選擇器復合問題

假設優先順序為1000(id選擇器),100(類選擇器),10(元素選擇器),1(通用選擇器)

則在使用復合選擇器時,對優先順序進行相加,值大的優先(注:低位選擇器無論多少個相加也不能高於高位選擇器,並集選擇器逗號兩邊的元素各自單獨計算優先順序,各自生效)

(4)繼承元素優先順序為0,及繼承父類元素的樣式的子元素的優先順序最低。

總的來看可以認為越具體越優先,越廣泛越不優先。

選擇器優先順序 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,始終高於外...