CSS后代选择器也可以叫做派生选择器、派生选择符或包含选择符,因为该选择符类型是作用于某个元素中的子元素的。
就是把外层的标记写在前面,内层的标记写在后面,之间用空格分隔。当标记嵌套时,内层的标记就成为外层标记的后代。
CSS后代选择器的格式
后代选择器的格式类似于:
p span b{ color:blue; font-size:14px; }
p、span和b之间用空格分隔。
<p>是最外层的文字,<span>是中间层的文字,<b>是最内层的文字,</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>标签并不会产生任何效果。只有<p>标签中<span>和</span>之间的文字变成了蓝色,而<p>标签外面<span>和</span>之间的文字颜色是按照CSS样式规则的第2条规则进行设置的,即为红色。
提示
后代选择器使得选择器的应用变得复杂而灵活,熟练掌握后代选择器,可以减少代码的冗余度,提高CSS的应用灵活性。