CSS选择器的嵌套 - 宁波智森网络公司

在CSS选择器中，还可以通过嵌套的方式，对特殊位置的HTML标记进行声明，例如当与之间包含标记时，就可以使用嵌套进行相应的控制，具体如：

<html> 
<head> 
<title>CSS选择器的嵌套声明</title> 
<style type="text/css"> 
<!--  
p b{       /* 嵌套声明 */  
 color:maroon;    /* 颜色 */  
 text-decoration:underline; /* 下划线 */  
}  
--> 
</style> 
   </head> 
 
<body> 
 <p>嵌套使<b>用CSS</b>标记的方法</p> 
 嵌套之外的<b>标记</b>不生效  
</body> 
</html>

通过将b选择器嵌套在p选择器中进行声明，显示效果只适用与和之间的标记，而其外的标记并不产生效果，上例中，只有第一行的粗体字变成了深红色并加上了下划线，而第二行除了文字变成了粗体，其他地方没有任何变化。
嵌套选择器的使用非常广泛，不只是嵌套的标记本身，类别选择器和ID选择器都可以进行嵌套。下面是一些经典的嵌套语句：
.special i{color:red} /*使用了属性special的标记里面包含的*/
#one li{padding-left:5px;} /*ID为one的标记里面包含的<li>*/
Td.top .top1 strong{font-size:16px;}/*多层嵌套，同样实用*/
上面的第三行使用了3层嵌套，实际上更多层的嵌套在语法上都是允许的。上面的这3个层嵌套表示的就是使用了.top类别的<td>标记中包含.top1类别的标记，其中包含了的标记所声明的风格样式，可能相对应的HTML为（一种可能的情况）：

<td class="top"> 
<p class="top1"> 
其他内容<strong>CSS控制的部分</strong>其他内容  
</p> 
</td>

附注：
选择器的嵌套在CSS的编写中可以大大减少对class和id的声明。因此在构建页面HTML框架时通常只给外层标记（父标记）定义class或者id，内层标记（子标记）能通过嵌套表示的则利用嵌套的方式，而不需要再定义新的class或者专用id。只有当子标记无法利用此规则时，才单独进行声明，例如一个<ul>标记中包含多个<li>标记，而需要对其中某个<li>单独设置CSS样式时才赋给该<li>一个单独id或者类别，而其他<li>同样采用"ul li{..}"的嵌套方式来设置。