什麼是選擇器的聲明與嵌套？ CSS選擇器的聲明與嵌套-css教學-PHP中文網

首頁

web前端

css教學

什麼是選擇器的聲明與嵌套？ CSS選擇器的聲明與嵌套

零下一度

Apr 22, 2017 pm 01:10 PM

使用CSS選擇器控制HTML標記的時候，每個選擇器的屬性可以一次宣告多個，選擇器本身也可以同時宣告多個。並且，任何形式的選擇器，都是合法的，標記選擇器，class選擇器和ID選擇器都可以集體聲明。在聲明CSS選擇器時，如果某些選擇器的風格是完全相同的，或者部分相同，這時便可以使用集體聲明的方式，將風格相同的選擇器同時聲明。

<span style="font-size:24px;"><html>
	<head>
		<title>
			集体声明
		</title>
		<style type="text/css">
			<!--
			h1,h2,h3,h4,h5,p{
			color:purple;
			font-size:15px;
		}
			h2.special,.special,#one{
			text-decoration:underline;
		}
			-->
		</style>
	</head>
	
	<body>
		<h1 id="集体声明h">集体声明h1</h1>
		<h2 id="集体声明h">集体声明h2</h2>
		<h3 id="集体声明h">集体声明h3</h3>
		<h4 id="集体声明h">集体声明h4</h4>
		<h5 id="集体声明h">集体声明h5</h5>
		<p>集体声明p1</p>
		<p class="special">集体声明p2</p>
		<p id="one">集体声明p3</p>
	</body>
</html>
</span>

全域宣告

對於實際網站中，如果希望頁面中所有的標記都使用同一種CSS樣式，但是，又不希望逐一集體聲明，這是可以使用全域聲明符號*來聲明。

<span style="font-size:24px;"><html>
	<head>
		<title>
			集体声明
		</title>
		<style type="text/css">
			<!--
			*{
			color:purple;
			font-size:15px;
		}
			h2.special,.special,#one{
			text-decoration:underline;
		}
			-->
		</style>
	</head>
	
	<body>
		<h1 id="集体声明h">集体声明h1</h1>
		<h2 id="集体声明h">集体声明h2</h2>
		<h3 id="集体声明h">集体声明h3</h3>
		<h4 id="集体声明h">集体声明h4</h4>
		<h5 id="集体声明h">集体声明h5</h5>
		<p>集体声明p1</p>
		<p class="special">集体声明p2</p>
		<p id="one">集体声明p3</p>
	</body>
</html>
</span>

可以看出兩種宣告效果完全一樣，但是，使用全域宣告會使程式碼大幅的減少。

選擇器的巢狀

在CSS選擇器中，可以使用巢狀的方式，對特殊位置的HTML標記進行聲明。

例如，控制p標記中的b標記

<span style="font-size:24px;"><html>
	<head>
		<title>
			CSS选择器的嵌套声明
		</title>
		<style type="text/css">
			<!--
			p b{
			color:maroon;
			text-decortion:underline;
		}
			-->
		</style>
	</head>
	
	<body>
		<p>嵌套使<b>用CSS</b>标记的方法</p>
		嵌套之外的<b>标记</b>不生效
	</body>
</html>
</span>

嵌套選擇器，使用非常的廣泛，不僅只是嵌套的標記本身，類別選擇器和ID選擇器都可以進行嵌套。

下面的程式碼使用了三層嵌套，實際上更多層次的巢狀都是允許的，表示.top類別的

標記中，包含的. top1類別的

標記，其中包含的標記，所聲明的樣式風格。

<span style="font-size:24px;">td.top .top1 strong{
			font-size:16px;
		}
<td class="top">
	<p class="top1">
		其他内容<strong>CSS控制的部分</strong>其他内容
	</p>
</td>
</span>

選擇器的嵌套，在CSS中可以大幅減少對class和id的聲明，因此，在建構頁面的HTML時，通常只給外層標記定義class或者id，內層標記能透過嵌套表示的則利用嵌套的方式，從而，不需要再定義新的class或id，只有當子標記無法利用此規則時，才進行單獨的宣告。

以上是什麼是選擇器的聲明與嵌套？ CSS選擇器的聲明與嵌套的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn