2.3　CSS 选择符

jQuery支持CSS规范1到规范3中的几乎所有选择符，具体内容可以参考W3C（World Wide Web Consortium，万维网联盟）网站http://www.w3.org/Style/CSS/specs。这种对CSS选择符的支持，使得开发者在增强自己的网站时，不必为哪种浏览器不理解某种不太常用的选择符而担心，只要该浏览器启用了JavaScript就没有问题。

　渐进增强

负责任的 jQuery 开发者应该在编写自己的程序时，始终坚持渐进增强（progressive enhancement）和平稳退化（graceful degradation）的理念，做到在JavaScript禁用时，页面仍然能够与启用JavaScript时一样准确地呈现，即使没有那么美观。贯穿本书，我们还将继续探讨这些理念。关于渐进增强的更多信息，请参考：http://en.wikipedia.org/wiki/Progressive_enhancement。

为了学习在jQuery中如何使用CSS选择符，我们选择了一个很多网站中都会有的通常用于导 航的结构——嵌套的无序列表。

<ul id="selected-plays">
  <li>Comedies
    <ul>
      <li><a href="/asyoulikeit/">As You Like It</a></li>
      <li>All's Well That Ends Well</li>
      <li>A Midsummer Night's Dream</li>
      <li>Twelfth Night</li>
    </ul>
  </li>
  <li>Tragedies
    <ul>
      <li><a href="hamlet.pdf">Hamlet</a></li>
      <li>Macbeth</li>
      <li>Romeo and Juliet</li>
    </ul>
  </li>
  <li>Histories
    <ul>
      <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
         <ul>
           <li>Part I</li>
           <li>Part II</li>
         </ul>
      <li><a href="http://www.shakespeare.co.uk/henryv.htm">
                                                   Henry V</a></li>
      <li>Richard II</li>
    </ul>
  </li>
</ul>

　下载代码示例

如同本书其他HTML、CSS以及JavaScript示例一样，上面的标记只是完整文　　档的一个片段。如果读者想试一试这些示例，可以从以下地址下载完整的示例代码：Packt Publishing网站http://www.packtpub.com/support，或者本书网站http://book.learningjquery.com/。

我们注意到，其中第一个<ul>的ID值为selected-plays，但<li>标签则全都没有与之关联的类。在没有应用任何样式的情况下，这个列表的外观如图2-2所示。

图　2-2

图2-2中的嵌套列表按照我们期望的方式显示——一组带符号的列表项垂直排列，并且每个 列表都按照各自的级别进行了缩进。

基于列表项的级别添加样式

假设我们想让顶级的项（Comedies、Tragedies和Histories），而且只有顶级的项水平排列，那么可以先在样式表中定义一个horizontal类：

.horizontal {
  float: left;
  list-style: none;
  margin: 10px;
}

这个horizontal类会将元素浮动到它后面元素的左侧，如果这个元素是一个列表项，那么会移除其项目符号，最后再为该元素的每一边各添加10像素的外边距。

这里，我们没有直接在HTML中添加horizontal类，而只是将它动态地添加给位于顶级的列表项Comedies、Tragedies和Histories，以便示范jQuery中选择符的用法，如代码清单2-1所示。

代码清单2-1

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
});

我们在第1章讨论过，当在jQuery代码中使用$(document).ready()时，位于其中的所有代码都会在DOM加载后立即执行。

第2行代码使用子元素组合符（>）将horizontal类只添加到位于顶级的项中。实际上，位于$()函数中的选择符的含义是，查找ID为selected-plays的元素（#selected-plays）的子元素（>）中所有的列表项（li）。

随着这个类的应用，列表项应该水平对齐，而不是垂直对齐，如图2-3所示。

图　2-3

要为其他项（非顶级的项）添加样式，有很多种方式。因为已经为顶级项添加了horizontal类，所以取得全部非顶级项的一种方式，就是使用否定式伪类选择符来识别没有horizontal类的所有列表项。注意代码清单2-2添加的第3行代码。

代码清单2-2

$(document).ready(function() {
  $('#selected-plays > li').addClass('horizontal');
  $('#selected-plays li:not(.horizontal)').addClass('sub-level');
});

这一次取得的每个列表项（<li>）：

• 是ID为selected-plays的元素（#selected-plays）的后代元素。

• 没有horizontal类（:not(.horizontal)）。

在为这些列表项添加了sub-level类之后，它们的背景颜色变为在样式表规则中定义的浅灰色。

.sub-level {
  background: #ccc;
}

此时的嵌套列表如图2-4所示。

图　2-4