【转】包含选择与子对象选择符的区别
转自 http://blog.doyoe.com/article.asp?id=177
相信会进来看这篇文章的人，都对CSS选择符这个名词不陌生了。CSS为我们提供了很多选择符，这使得我们可以根据自己的需要选择适合的选择符来进行样式的构造。
在众多的选择符里，相信大家用的最多，最熟悉的就是ID选择符，类选择符及包含选择符等常用的选择符。然后对于一些如属性选择符，相邻选择符，子对象选择符可能就稍微有点陌生了，这当然也是有原因的，因为IE6及以下的浏览器并不支持这几个选择符，而大多数从事这方面工作的技术人员，多数时候还是主要考虑占据着浏览器市场大半壁江山的IE6，于是对这些IE6的非亲派不熟悉也成了一个没办法的必然。
在IE7，甚至是IE8，Firefox，Opera，Safari等慢慢蚕食IE6市场的今天，那些以往不大常用的选择符也逐渐开始被应用起来。比如呆会要讲到的子对象选择符。
要讲子对象选择符，当然得顺带讲一下包含选择符，因为这两者之间有着共同之处：
如以下一段简单的包含选择符例子：
body p{
color:#f00;
}
这是一个最简单的包含选择符，它表达的意思是所有body里面的p都将以红色的字显示。
我们再来看一个子对象选择符的例子：
body>p{
color:#f00;
}
这是一个子对象选择符，意思是所有body里面的“子对象”p都将以红色的字显示。
以同一段html为例，分别应用以上两段样式：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>em test</title>
<meta name="Author" content="Doyoe(飘零雾雨), dooyoe@gmail.com" />
</head>
<body>
<p>传说中的测试</p>
<div><p>传说中的测试</p></div>
<p>传说中的测试</p>
<div><p>传说中的测试</p></div>
</body>
</html>
包含选择符的效果为：
（图一）
子对象选择符的效果：
（图二）
从图一和图二上我们可以看出，包含选择符定义的样式应用到了body下的所有p元素上；而子对象选择符定义的样式只应用到body下的第一和第三个p元素上，这是因为第二和第四个p元素并非body的儿子，而是它的孙子。
由此可以见包含选择符的深度和广度超过子对象选择符；而子对象选择符的针对性和唯一性比包含选择符强。大家可以根据实际情况选择选择何种选择符来达到自己的目的。
