一个较好的方法

在我们研究选择符之前，弄清楚他们的不同和为什么它们是好东西的原因是个不错的主意。原因很简单，它减少网页的“class-itis”弊病。主要原因就是“class-itis”在目前网页中非常普遍，直到现在，我们拥有了为建立配合选择器而存在而且支持完美的后代选择符，即两个选择器之间空格。

当使用后代选择符，右边的一个元素选择器是被选择的，不管左边的元素选择器标签有几个。举例，p a{color:red;}，意思是段落里面的所有链接都是红色。这非常有用，也是一类相当广泛的选择组合。

代表性的class-itis的级数像下面一样。首先，你使用一个非常好的干净的html结构运用简单的样式构建标题、段落等等。然后有人告诉你每个div块第一段里文本颜色需要红色。你不能仅改变目标段落的样式，因为那可能影响全部，所以你被迫命名一个特殊class应用在第一段。

于是数十次相同的要求在后面继续，结果就形成了class-itis现象。为什么说这样是糟糕有害的？因为这和font标签比起来没什么区别。当然，classes允许无穷的花样，但是紧随其后就是无穷的混乱，或可能更快胜于随后。

举个例子，假设你已经给所有第一段加上class属性，而且一切都好。现在你被告知，首两段需要样式，不仅是第一个。为使用正确class完成目的，你必须确信第二段的每个都有专用的class。最后，这样的习惯导致源代码里到处都是class，感觉像新旧两个样式在打斗冲突，让人头痛。

如果我们只针对讲这样未必不好，实际上“运用下列样式到每个div块第一段和第二段里面。”这样的情况发生了，最新的选择符允许我们耍点小聪明就可办到。

回顾复习下

让我们复习一些术语。W3C 2.1 规范解释了选择器（selectors）和选择符（combinators）：

“一个选择器是用选择符连接起来的一个或更多的选择器。选择符包括：空格，‘>’和‘+’。空格可能出现在一个选择符和简单的选择器之间。”一个简单的选择器可以是一种类型选择器或是通用选择器跟随零或者更多属性选择器，ID选择器或者伪类，在任何顺序。

第一个支持的选择符（也经常被称作选择器，这是唯一正确的部分）是子选择符。在简单的选择器之间指定“>”符号。一个简单的例子，#leftcol>p{color:blue;}，意思是#leftcol下面所有子段落文本颜色是蓝色。

但是如果#leftcol有一个DIV，而且DIV还有一个段落，#left>p选择器不会使这个段落里的文本变成蓝色，因为子选择符，不像频繁使用的后代选择符，只选择直接的孩子，不是“>”符号的左边元素任何深度的嵌套后代。

另外一个新支持的选择符将是相邻选择符，使用"+"符号。子选择符可以指向另外一个元素的子部，相邻选择符可以指向跟随的元素，但与前面的元素独立。例子，h2+p {color:blue;}，跟随h2元素后面段落的文本颜色为蓝色。

现在你明白选择符怎么工作，我们开始研究复杂联合元素，看看我们能不能不使用class达到目的。

使用选择符

我们从简单但充分复杂的html结构开始：

<div>First DIV
   <p>Paragraph One -
      <a href="#">link A</a>
      <a href="#">link B</a>
   </p>
   <div>Second DIV
      <p>Paragraph Two -
         <a href="#">link C</a>
         <a href="#">link D</a>
      </p>
      <p>Paragraph Three -
         <a href="#">link E</a>
         <a href="#">link F</a>
      </p>
      <p>Paragraph Four -
         <a href="#">link G</a>
         <a href="#">link H</a>
      </p>
      <div>Third DIV
         <p>Paragraph Five -
            <a href="#">link I</a>
            <a href="#">link J</a>
         </p>
         <p>Paragraph Six -
            <a href="#">link K</a>
            <a href="#">link L</a>
         </p>
         <p>Paragraph Seven -
            <a href="#">link M</a>
            <a href="#">link N</a>
         </p>
      </div>
      <p>Paragraph Eight -
         <a href="#">link O</a>
         <a href="#">link P</a>
      </p>
   </div>
   <p>Paragraph Nine -
      <a href="#">link Q</a>
      <a href="#">link R</a>
  </P>
</div>

图1 是html结构的文本对象模型树，图揭示了元素之间真实结构的联系。

在图1里兄弟元素分布在较低的支线上，它们的源头分布在图表从左到右顺序上。每组兄弟元素是它们所在支线会合顶点单一元素的子元素。如Paragraph One, Second DIV, and Paragraph Nine都是兄弟，而且都是First DIV的子元素。

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

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

这个结构可以进行许多选择符的试验。