CSS后代选择器
2016-07-18 10:00
429 查看
CSS后代选择器也可以叫做派生选择器、派生选择符或包含选择符，因为该选择符类型是作用于某个元素中的子元素的。
就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记嵌套时，内层的标记就成为外层标记的后代。
后代选择器的格式类似于：
p、span和b之间用空格分隔。
最外层是<p>标签，里面嵌套了<span>标签，<span>标签中又嵌套了<b>标签，那么span是p的子元素，b是span的子元素。
color:blue; /* 蓝色 */
}
span{
color:red; /* 红色 */
}
-->
</style>[/code]
源代码如下：
在浏览器中查看CSS后代选择器的显示效果。如下图所示：
将span选择器嵌套在p选择器中进行声明，显示效果只适用于<p>和</p>之间的<span>标签，而它外面的<span>标签并不会产生任何效果。只有<p>标签中<span>和</span>之间的文字变成了蓝色，而<p>标签外面<span>和</span>之间的文字颜色是按照CSS样式规则的第2条规则进行设置的，即为红色。
后代选择器使得选择器的应用变得复杂而灵活，熟练掌握后代选择器，可以减少代码的冗余度，提高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"> <!-- [code]p span{ /* 嵌套声明 */
color:blue; /* 蓝色 */
}
span{
color:red; /* 红色 */
}
-->
</style>[/code]
源代码如下：
<!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的应用灵活性。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 