CSS入門十二：選擇器的優先順序

小枯林發表於2020-12-21
CSS

目錄

示例程式：

!important：強制優先。

當同一個標籤的class有多個值的時候，產生衝突時的效果：

出現組合的情況時候：組合的選擇器和其他選擇器相比，選擇器的優先順序順序也是適用的

當同一個物件被多個選擇器選中並修飾，產生衝突時，哪個選擇器的優先順序更高就需要考慮了。

可以發現，範圍越小，定位越精確的，其優先順序越高。

（ps:第二個行內樣式，因為css的應用，在實際中用的不多，除非某些個別情況會少量使用）

示例程式：

<!DOCTYPE html>
<html>
<head>
	<title>內部樣式表演示</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<div class="div1" id="div2">	
	</div>
</body>
</html>
div{
	width: 200px;
	height: 200px;
	background-color: red;
}

效果：

……………………………………………………

若index.css改成：下面，標籤選擇器和類選擇器產生了衝突

div{
	width: 200px;
	height: 200px;
	background-color: red;
}

.div1{
	background-color: blue; /*標籤選擇器的優先順序，低於 類選擇器*/
}

效果：發現，證實了標籤選擇器的優先順序低於類選擇器

……………………………………………………

若index.css改成：下面，標籤選擇器、類選擇器、id選擇器三個產生了衝突

div{
	width: 200px;
	height: 200px;
	background-color: red;
}

.div1{
	background-color: blue; /*標籤選擇器的優先順序，低於 類選擇器*/
}
#div2{
	background-color: yellow; /*類選擇器的優先順序，低於 id選擇器*/
}

效果：證實了，id選擇器的優先順序比類選擇器和標籤選擇器都高

!important：強制優先。

這個通常不使用，可能會干擾程式的執行，除非特殊的情況下才會使用。

div{
	width: 200px;
	height: 200px;
	background-color: red;
}

.div1{
	/*但這兒使用強制優先*/
	background-color: blue!important; /*標籤選擇器的優先順序，低於 類選擇器*/
}
#div2{
	background-color: yellow; /*類選擇器的優先順序，低於 id選擇器*/
}

效果：雖然，類選擇器的優先順序沒有id選擇器優先順序高，但類選擇器使用了強制優先。

當同一個標籤的class有多個值的時候，產生衝突時的效果：

div的class有兩個值，class="div1,div3"，

<!DOCTYPE html>
<html>
<head>
	<title>內部樣式表演示</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<div class="div1 div3" id="div2">	
	</div>
</body>
</html>

index.css：下面對div的class中的兩個都設定了，此時就衝突了，

div{
	width: 200px;
	height: 200px;
	background-color: red;
}

.div1{
	background-color: blue; 
}
.di3{
	background-color: yellow; 
}

效果：發現，當類選擇器衝突時，以後出現的為準。。。。。（層層覆蓋？）

出現組合的情況時候：組合的選擇器和其他選擇器相比，選擇器的優先順序順序也是適用的

好吧，這個例子更加說明，這些選擇器可以有千萬種組合，你要時間夠，就去試吧……………………XD

<!DOCTYPE html>
<html>
<head>
	<title>內部樣式表演示</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
	<div class="d1" id="d2">
		<div class="div1" id="div2"></div>
	</div>
	
</body>
</html>

index.css

div{
	width: 200px;
	height: 200px;
	background-color: red;
}
.d1 .div1{    /*空格選擇器*/
	background-color: yellow;

}

效果：發現，這也是ok的。即組合的類選擇器，也還是比標籤選擇器優先順序高。

相關文章