4.2 CSS选择器（3）――子元素选择器和相邻兄弟选择器
2008年5月4日
- 4.2 CSS选择器（1）――通配选择器、类型选择器与ID选择器
- 4.2 CSS选择器（2）――类选择器与包含选择器
- 4.2 CSS选择器（3）――子元素选择器和相邻兄弟选择器
- 4.2 CSS选择器（4）——属性选择器（Attribute Selectors）
提示：截止到本书完稿之日，主流的浏览器都支持以上几种选择器。而下面所列的选择器，则会有部分浏览器不支持。在以下的章节中，除非特别声明，则IE 7.0、Firefox 2.0及Opera 8.5以及更高版本的浏览器中都支持，而IE 6.0及更早的版本则不支持。
4.2.6 子元素选择器（Child Selectors）
子元素选择器的功能和包含选择器很像，其匹配也是基于文档树的关系，其定义如图4-8所示。
图4-8 子元素选择器
与包含选择器不同的是，子元素选择器只对元素的子元素生效，而不会影响到其他后代元素。例如：
div > em { color:red;}
<div> <em>这个em是div的子元素</em> <p>p中的<em>是p的子元素</p> </div>
则其在浏览器内的显示效果如图4-9所示。
图4-9 使用子元素选择器定义CSS的显示效果
由于IE 6.0及更早的版本不支持相邻兄弟选择器，因此这种选择器经常用来对IE 6.0隐藏某些CSS规则使用。
4.2.7 相邻兄弟选择器（Adjacent Sibling Selectors）
相邻兄弟选择器基于文档结构的“兄弟”关系，其定义如图4-10所示。
图4-10 相邻选择器
其含义是，与E1元素相邻的下一个兄弟元素，例如下列代码在浏览器内的效果如图4-11所示。
div + p { color: red; }
<p>与div相邻的上一个p</p> <div> <p>div中的p</p> </div> <p>与div相邻的下一个p</p> <p>不与div相邻的p</p>
图4-11 使用相邻选择器定义CSS的显示效果
同子元素选择器类似，相邻兄弟选择器也可以用来对IE 6.0隐藏某些CSS规则使用。
- 4.2 CSS选择器（1）――通配选择器、类型选择器与ID选择器
- 4.2 CSS选择器（2）――类选择器与包含选择器
- 4.2 CSS选择器（3）――子元素选择器和相邻兄弟选择器
- 4.2 CSS选择器（4）——属性选择器（Attribute Selectors）
