CSS后代选择器

来源：互联网发布：如何安装ubuntu虚拟机编辑：程序博客网时间：2024/04/30 04:16

CSS后代选择器也可以叫做派生选择器、派生选择符或包含选择符，因为该选择符类型是作用于某个元素中的子元素的。

就是把外层的标记写在前面，内层的标记写在后面，之间用空格分隔。当标记嵌套时，内层的标记就成为外层标记的后代。

CSS后代选择器的格式

后代选择器的格式类似于：

p span b{  color:blue;  font-size:14px;}

p、span和b之间用空格分隔。

<p>是最外层的文字，<span>是中间层的文字，<b>是最内层的文字,</b></span></p>

最外层是标签，里面嵌套了标签，标签中又嵌套了标签，那么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后代选择器的显示效果。如下图所示：

在浏览器中查看CSS后代选择器的显示效果

将span选择器嵌套在p选择器中进行声明，显示效果只适用于和之间的标签，而它外面的标签并不会产生任何效果。只有标签中和之间的文字变成了蓝色，而标签外面和之间的文字颜色是按照CSS样式规则的第2条规则进行设置的，即为红色。

提示

后代选择器使得选择器的应用变得复杂而灵活，熟练掌握后代选择器，可以减少代码的冗余度，提高CSS的应用灵活性。

0 0