CSS样式表：详细介绍IE7新支持的选择器（3）

图2使用清楚的样式显示它们怎么展示，First DIV的结构有Paragraph One, Second DIV, and Paragraph Nine组成。Second DIV有三个以上段落和拥有三个以上段落的Third DIV。所有段落的颜色是白色，每个包含两个链接元素。所有DIV黑色边框轻度褐色。

图2

图2: DIVs are black-bordered and paragraphs are colored white for clarity.

这个结构可以进行许多选择符的试验。#p#分页标题#e#

试验

好了，让我们试着更改Second DIV的三四两个段落。如果我们只想使用后代选择符可以像这样div div p {color:red;}；问题是上面的规则影响了Second DIV所有的段落，当然包括Third DIV的所有段落，因为Third div在DIV里面而段落在它里面。 还使用它？后代选择符没有一点选择性，让很多嵌套的元素都被选择当我们宁愿有给小的组选择。

的确，classes提供更好的选择性，但我们正试着避免class-itis。可是，不使用任何class仅使用相邻选择符比较困难。IE7 以前我们使用下面的方法：

div div p {color: red;}
div div div p {color: black;}
div div p.first {color: black;}

第一个规则应用了，然后带有另外DIV选择器的另外一个规则颠倒了Third DIV里的样式。随后阻止Paragraph Two的样式，我们没有选择，只有给段落指定一个class更换样式。真是痛苦！

通过子和兄选择符，我们可以很简单的实现，不需要class。

div>div>p+p {color: red;}
div>div>div p {color: black;}

图3 

图3: Our new combinators have selected only Paragraphs Three and Four.

让我们来分析下上面的代码，第一个规则的意思是：选择div的子部div的子部段落的相邻兄弟段落。

Second DIV是第一DIV的子部，Second DIV里面的两个段落即符合直接跟随另外一个段落的要求是Paragraph Two 和 Paragraph Three。Paragraph one没有被选中，因为在Second DIV里面没有兄弟段落在它前面。