jq 点击导航添加背景_jq入门（2）css选择符

今天继续分享jq入门基础。

css选择符

jQuery支持CSS规范1到规范3中的几乎所有选择符，具体内容可以参考W3C网站。这种对CSS选择符的支持，使得开发者在增强自己的网站时，不必为哪种浏览器不理解某种不太常用的选择符而担心，只要该浏览器启用了JavaScript就没有问题。

渐进增强负责任的jQuery开发者应该在编写自己的程序时，始终坚持渐进增强和平稳退化的理念，做到在JavaScript禁用时，页面仍然能够与启用JavaScript时一样准确地呈现。为了学习在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>

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

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

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

这个horizontal类会将元素浮动到它后面元素的左侧，如果这个元素是一个列表项，那么 会移除其项目符号，最后再为该元素的每一边各添加10像素的外边距。这里，我们没有直接在HTML中添加horizontal类，而只是将它动态地添加给位于顶级的列表项Comedies、Tragedies和Histories，以便示范jQuery中选择符的用法。

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

当在jQuery代码中使用$(document).ready()时，位于其中的所有代码都会在DOM加载后立即执行。 要为其他项（非顶级的项）添加样式，有很多种方式。因为已经为顶级项添加了horizontal类，所以取得全部非顶级项的一种方式，就是使用否定式伪类选择符来识别没有horizontal类的所有列表项。

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

这一次取得的每个列表项（）：是ID为selected-plays的元素（#selected-plays）的后代元素。没有horizontal类（:not(.horizontal)。在为这些列表项添加了sub-level类之后，它们的背景颜色变为在样式表规则中定义的浅灰色。

.sub-level {  
 background: #ccc;  
}  

此时的嵌套列表是上图这样的