CSS樣式優先級（繼承性、選擇器優先級）

CSS 樣式優先級

• CSS的繼承性
• • CSS優先規則1
  • CSS優先規則2
• 選擇器的優先級
• • 選擇器類型
  • CSS優先規則3
  • CSS優先規則4
  • CSS優先規則5

CSS的繼承性

CSS的繼承性指的是應用在一個标簽上的那些CSS屬性也會應用到字标簽上。

<div>
	<p></p>
</div>
           

如果

div

有

color:red

屬性，那麼

p

也會繼承

color:red

屬性。

CSS優先規則1

——最近的祖先樣式比其他祖先樣式優先級高。

<!-- 類名為 son 的 div 的 color 為 blue -->
<div style="color: red">
	<div style="color: blue">
		<div class="son"></div>
	</div>
</div>
           

CSS優先規則2

——“直接樣式”比“祖先樣式”優先級高

<!-- 類名為 son 的 div 的 color 為 blue -->
<div style="color: red">
	<div class="son" style="color: blue">
	</div>
</div>
           

選擇器的優先級

選擇器類型

CSS的7種基礎的選擇器：

選擇器	代碼	示例代碼	說明
通配選擇器	*	*{}	選擇所有元素
标簽選擇器	标簽名稱	a{}	根據标簽選擇元素
類選擇器	.<類名>	.class{}	根據class的值選擇元素
ID 選擇器	#<id值>	#id{}	根據id的值選擇元素
屬性選擇器	[<屬性>]	a[href]	根據屬性選擇元素
僞類選擇器	:<僞類>	a:hover{}	僞選擇器不是直接對應HTML中定義 的元素，而是向選擇器增加特殊的效果
僞元素選擇器	::<僞元素>	a:before{}	同上

組合選擇器：

選擇器	代碼	示例代碼	說明
後代選擇器	<選擇器> , <選擇器>	.father .child{}	先比對第二個選擇器的元素，并且屬于第一個選擇器内
子代選擇器	<選擇器> > <選擇器>	.father>.child{}	先比對第二個選擇器的元素，并且為第一個選擇器内元素的後代
兄弟選擇器	<選擇器> + <選擇器>	.father+.child{}	比對緊跟第一個選擇器，并且比對第二個選擇器内的元素，如緊跟p元素後的a元素

CSS優先規則3

——優先級關系：内聯樣式 > ID選擇器 > 類選擇器 = 屬性選擇器 = 僞類選擇器 > 标簽選擇器 = 僞元素選擇器

<!-- html -->
<!-- black -->
<div class="content-class" id="content-id" style="color: black"></div> 
<!-- red -->
<div class="content-class" id="content-id"></div>  				
<!-- blue -->
<div class="content-class"></div>  					
<!-- grey -->
<div></div>  														
           

/* css */
#content-id {
	color: red;
}
.content-class {
	color: blue;
}
div {
	color: grey;
}
           

由規則3可知，4個

div

的color依次為

black

、

red

、

blue

、

grey

。

CSS優先規則4

——按a、b、c的順序依次比較大小，大的優先級高，相等則比較下一個。若a=b=c，則按“就近原則”來判斷

( a ) 計算選擇符中ID選擇器的個數；

( b ) 計算選擇符中類選擇器、屬性選擇器以及僞類選擇器的個數之和；

( c ) 計算選擇符中标簽選擇器和僞元素選擇器的個數之和。

<!-- html -->
<div id="con-id">
	<span class="con-span"></span>
</div>
           

/* css */
#con-id span {
	color: red;
}
div .con-span {
	color: blue;
}
           

由規則4可知，

#con-id span

的a值比

div .con-span

大，是以

span

的color為

red

。

CSS優先規則5

——屬性後插有

!important

的屬性擁有最高優先級。若同時插有

！important

，則再利用規則3、4判斷優先級。

<!-- html -->
<div id="con-id">
	<span class="con-span"></span>
</div>
           

/* css */
#con-id span {
	color: red;
}
div .con-span {
	color: blue !important;
}
           

根據規則4，

#con-id span

擁有更高權值，但選擇器

div .con-span

中的

background

屬性被插入了

!important

，是以

p

的background為

red

。

參考

菜鳥教程 · CSS 樣式優先級