首頁 > web前端 > css教學 > 主體

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

零下一度
發布: 2017-04-22 13:10:52
原創
2629 人瀏覽過

使用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>集体声明h1</h1>
		<h2 class="special">集体声明h2</h2>
		<h3>集体声明h3</h3>
		<h4>集体声明h4</h4>
		<h5>集体声明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>集体声明h1</h1>
		<h2 class="special">集体声明h2</h2>
		<h3>集体声明h3</h3>
		<h4>集体声明h4</h4>
		<h5>集体声明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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板