CSS后代选择器
CSS后代選擇器也可以叫做派生選擇器、派生選擇符或包含選擇符，因為該選擇符類型是作用于某個元素中的子元素的。
就是把外層的標記寫在前面，內(nèi)層的標記寫在后面，之間用空格分隔。當標記嵌套時，內(nèi)層的標記就成為外層標記的后代。
CSS后代選擇器的格式
后代選擇器的格式類似于：
p span b{color:blue;font-size:14px; }p、span和b之間用空格分隔。
<p>是最外層的文字，<span>是中間層的文字，<b>是最內(nèi)層的文字,</b></span></p>最外層是<p>標簽，里面嵌套了<span>標簽，<span>標簽中又嵌套了<b>標簽，那么span是p的子元素，b是span的子元素。
示例
<style type="text/css"> <!-- p span{ /* 嵌套聲明 */color:blue; /* 藍色 */ } 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>標記的方法之一。</p> 嵌套之外的<span>標記</span>不生效。 </body> </html>在瀏覽器中查看CSS后代選擇器的顯示效果。如下圖所示：
將span選擇器嵌套在p選擇器中進行聲明，顯示效果只適用于<p>和</p>之間的<span>標簽，而它外面的<span>標簽并不會產(chǎn)生任何效果。只有<p>標簽中<span>和</span>之間的文字變成了藍色，而<p>標簽外面<span>和</span>之間的文字顏色是按照CSS樣式規(guī)則的第2條規(guī)則進行設置的，即為紅色。
提示
后代選擇器使得選擇器的應用變得復雜而靈活，熟練掌握后代選擇器，可以減少代碼的冗余度，提高CSS的應用靈活性。
總結(jié)
- 上一篇： CSS使用浮动属性和边距设计3行3列定宽
- 下一篇： DIV+CSS星号（*）选择器