在众多的选择符里，相信大家用的最多，最熟悉的就是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的儿子，而是它的孙子。
由此可以见包含选择符的深度和广度超过子对象选择符；而子对象选择符的针对性和唯一性比包含选择符强。大家可以根据实际情况选择选择何种选择符来达到自己的目的。
[本日志由 飘零雾雨 于 2008-05-21 11:12 PM 编辑] http://blog.doyoe.com/article.asp?id=177
9636
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
