在CSS选择器中,还可以通过嵌套的方式,对特殊位置的HTML标记进行声明,例如当<p>与</p>之间包含<b></b>标记时,就可以使用嵌套进行相应的控制,具体如:
- <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选择器中进行声明,显示效果只适用与<p>和</p>之间的<b>标记,而其外的<b>标记并不产生效果,上例中,只有第一行的粗体字变成了深红色并加上了下划线,而第二行除了文字变成了粗体,其他地方没有任何变化。
嵌套选择器的使用非常广泛,不只是嵌套的标记本身,类别选择器和ID选择器都可以进行嵌套。下面是一些经典的嵌套语句:
.special i{color:red} /*使用了属性special的标记里面包含的<i>*/
#one li{padding-left:5px;} /*ID为one的标记里面包含的<li>*/
Td.top .top1 strong{font-size:16px;}/*多层嵌套,同样实用*/
上面的第三行使用了3层嵌套,实际上更多层的嵌套在语法上都是允许的。上面的这3个层嵌套表示的就是使用了.top类别的<td>标记中包含.top1类别的标记,其中包含了的<strong>标记所声明的风格样式,可能相对应的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{..}"的嵌套方式来设置。
宁波智森网络公司版权所有,转载请注明来自宁波网站建设网,http://www.nbseoer.com。 (您可能还想了解:宁波网站推广|宁波网站设计|宁波SEO)



