很多朋友把分不清 子选择符 和 后代选择符 的区别。其实它们的差别还是蛮大的。 后代选择符 IE6，甚至更低IE版本，就已经支持了。也许你 已经被这些 拗口 、 深奥 的名词搞迷糊了。到底什么 后代选择符 呢？其实大家都用过，看看下面的例子就明白了。 现在无论是FireFox还是IE7，对于 子选择符 的支持还都存在一定的问题。
<!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=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
/*后代选择符*/
#div1 p{
color:red;
}
/*子选择符*/
#div1>p{
font-size:150%;
}
</style>
</head>
<body>
<div id="div1">
<p id="p1">我是div1的儿子1
<p id="p1_1">我是div1的孙子</p>
</p>
<p id="p2">我是div1的儿子2</p>
</div>
</body>
</html>
示例中，"p1"和"p2"包含在 div1 内，那么"p1"和"p2"就是 div1 的儿子，是后代，而 p1_1 包含在 p1 中， 那么p1_1 是 p1 的儿子，是后代。而 p1_1 也包含在 div1 中，则 p1_1 是 div1 的孙子，也是后代。使用 #div1 p{color:red;} （后代选择器）会将div1下面的所有段落的字体颜色都设置为了红色。无论是孩子还是孙子，都要听话。 只要是我的后代，就 得听我的话！这就是 后代选择符 。
而 子选择符 则不会那么霸道，它只管它的 儿子 ，不会去管 孙子 、 重孙子 、 重重孙子
