什麼是選擇器的聲明與嵌套？ CSS選擇器的聲明與嵌套
- 零下一度原創
- 2017-04-22 13:10:522679瀏覽
使用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類別的b6c5a531a458a2e790c1fd6421739d1c標記中，包含的. top1類別的e388a4556c0f65e1904146cc1a846bee標記，其中包含的8e99a69fbe029cd4e2b854e244eab143標記，所聲明的樣式風格。
<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中文網其他相關文章！