當(dāng)前位置：
首頁(yè) >
CSS后代选择器
發(fā)布時(shí)間：2025/6/15
53
豆豆
CSS后代選擇器也可以叫做派生選擇器、派生選擇符或包含選擇符，因?yàn)樵撨x擇符類(lèi)型是作用于某個(gè)元素中的子元素的。
就是把外層的標(biāo)記寫(xiě)在前面，內(nèi)層的標(biāo)記寫(xiě)在后面，之間用空格分隔。當(dāng)標(biāo)記嵌套時(shí)，內(nèi)層的標(biāo)記就成為外層標(biāo)記的后代。
CSS后代選擇器的格式
后代選擇器的格式類(lèi)似于：
p span b{color:blue;font-size:14px; }p、span和b之間用空格分隔。
<p>是最外層的文字，<span>是中間層的文字，<b>是最內(nèi)層的文字,</b></span></p>最外層是<p>標(biāo)簽，里面嵌套了<span>標(biāo)簽，<span>標(biāo)簽中又嵌套了<b>標(biāo)簽，那么span是p的子元素，b是span的子元素。
示例
<style type="text/css"> <!-- p span{ /* 嵌套聲明 */color:blue; /* 藍(lán)色 */ } span{color:red; /* 紅色 */ } --> </style>源代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS后代選擇器示例-www.baike369.com</title> <style type="text/css"> <!-- p span{color:blue; } span{color:red; } --> </style> </head> <body> <h1>CSS后代選擇器示例</h1> <p>嵌套是<span>使用CSS</span>標(biāo)記的方法之一。</p> 嵌套之外的<span>標(biāo)記</span>不生效。 </body> </html>在瀏覽器中查看CSS后代選擇器的顯示效果。如下圖所示：
將span選擇器嵌套在p選擇器中進(jìn)行聲明，顯示效果只適用于<p>和</p>之間的<span>標(biāo)簽，而它外面的<span>標(biāo)簽并不會(huì)產(chǎn)生任何效果。只有<p>標(biāo)簽中<span>和</span>之間的文字變成了藍(lán)色，而<p>標(biāo)簽外面<span>和</span>之間的文字顏色是按照CSS樣式規(guī)則的第2條規(guī)則進(jìn)行設(shè)置的，即為紅色。
提示
后代選擇器使得選擇器的應(yīng)用變得復(fù)雜而靈活，熟練掌握后代選擇器，可以減少代碼的冗余度，提高CSS的應(yīng)用靈活性。
總結(jié)
- 上一篇： CSS使用浮动属性和边距设计3行3列定宽
- 下一篇： DIV+CSS星号（*）选择器