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

现在你明白选择符怎么工作，我们开始研究复杂联合元素，看看我们能不能不使用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

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