生活随笔
收集整理的這篇文章主要介紹了
CSS选择器的声明与嵌套
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
CSS選擇器的聲明與嵌套
? ? ? ? ? 使用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類別的<td>標記中，包含的.top1類別的<p>標記，其中包含的<strong>標記，所聲明的樣式風格。
<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选择器的声明与嵌套的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
