CSS 選擇器優先順序

css 有三類選擇器：標籤選擇器、class 選擇器、id 選擇器。

一、行內樣式 > 內部樣式 > 外部樣式

1. 鏈入外部樣式表與內部樣式表之間的優先順序取決於所處位置的先後

2. 最後定義的優先順序最高（就近原則）

可參考部落格 

二、id 選擇器 > class 選擇器 > 標籤選擇器

<

style 
type
="text/css"
>
div#idred
.classblue
style
>
<
div>css 標籤選擇器
div>
<
div 
class
="classblue"
>css class選擇器
div>
<
div 
id="idred"
>css id 選擇器
div>

可以看出

class 選擇器 > 標籤選擇器

id 選擇器 > 標籤選擇器

<

style 
type
="text/css"
>
#idred
.classblue
style
>
<
div 
id="idred"
class
="classblue"
>css id class 選擇器
div>

<

style 
type
="text/css"
>
#idred
.classblue
style
>
<
div 
class
="classblue"
id="idred"
>css id class 選擇器
div>

上述，調換div 中 class 和 id 的位置，顯示結果依舊為 紅色，由此可以看出id 選擇器 > class 選擇器

因此有，id 選擇器 > class 選擇器 > 標籤選擇器

三、對同乙個標籤選擇器

pp

最後這個 p 元素額顏色為 藍色 。

四、有兩個 class 屬性值

有以下兩種 css 樣式

第一種

.classblue.classyellow第二種
.classyellow.classblue

有以下兩種 html 的 div 標籤

<

div 
id="classyellow 
classblue"
>css選擇器 黃在前，藍在後
div>
<
div 
class
="classblue 
classyellow"
>css選擇器 黃在後，藍在前
div>

可以看出，當乙個元素有兩個 class 屬性值時，與 class 屬性值在元素中定義的位置無關，而是與 css 樣式設定的位置有關，後者覆蓋前者。

五、選擇器權值

同乙個樣式表中：

1.權值相同，就近原則（離被設定元素躍進優先順序越高）

2.權值不同，根據權值來判斷 css 樣式，那種 css 樣式權值高，就使用哪種樣式。

選擇器

權值

標籤選擇器　

1類選擇器和偽類

10id 選擇器

100萬用字元選擇器

0行內選擇器

1000

權值規則：

1. 統計不同選擇器的個數

2. 每類選擇器的個數乘以相應權值

3. 把所有的指相加得出選擇器的權值

例如：給下列元素加樣式

<

div 
id="main"
>
<
div>
<
div 
class
="warning"
>
<
h2>加樣式的元素
h2>
div>
<
div 
class
="test"
>
<
h2>不加樣式的元素
h2>
div>
div>
div>

#main div.warning h2id : 1      class : 1     標籤 : 2

1*100=100 1*10=10 2*1=1
權值 : 100 + 10 + 2 =112
#main div h2 權值 ： 100 + 2 =102
所以最後加樣式的元素 h2 顯示的顏色為 紅色

六、!important 規則

可調整樣式優先順序，新增在樣式優先順序之後，中間用空格隔開

div

看下面的例子：

<

style 
type
="text/css"
>
pstyle
>
<
p color
="red"
>最後顯示為藍色
p>

行內樣式的優先順序比內部樣式的高，但是這裡最後顯示的顏色卻為 紅色，這是因為!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，始終高於外...