使用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類別的
標記,其中包含的標記,所聲明的樣式風格。
<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中文網其他相關文章!