2.3 CSS选择符

发表于 更新于 分类于 ， Waline： 本文字数： 2.7k 阅读时长 ≈ 2 分钟

2.3 CSS选择符

jQuery支持CSS规范1到CSS规范3中的几乎所有选择符,具体内容可以参考W3C (World Wide Web Consortium,万维网联盟)网站。这种对CSS选择符的支持,使得开发者在增强自己的网站时,不必为哪种浏览器不理解某种不太常用的选择符而担心,只要该浏览器启用了JavaScript就没有问题。
渐进增强
负责任的jQuery开发者应该在编写自己的程序时,始终坚持渐进增强(progressive enhancement)和平稳退化(graceful degradation)的理念,做到在JavaScript禁用时,页面仍然能够与启用JavaScript时一样准确地呈现,即使没有那么美观。贯穿本书,我们还将继续探讨这些理念。关于渐进增强的更多信息,请参考。
为了学习在jQuery中如何使用CSS选择符,我们选择了一个很多网站中都会有的通常用于导航的结构——嵌套的无序列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>

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

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

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

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

1
2
3
4
5
.horizontal { 
  float: left; 
  list-style: none; 
  margin: 10px; 
}

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

子元素组合符

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

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

我们在第1章讨论过,当在jQuery代码中使用$(document).ready()时,位于其中的所有代码都会在DOM加载后立即执行。
第2行代码使用子元素组合符(>)将horizontal类只添加到位于顶级的项中。实际上,位于$()函数中的选择符#selected-plays>li的含义是,查找ID为selected-plays的元素(#selected-plays)的子元素(>)中所有的列表项(li)。
随着这个类的应用,列表项应该水平对齐,而不是垂直对齐,如图2-3所示。

否定式伪类选择符

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

1
2
3
4
$(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类之后,它们的背景颜色变为在样式表规则中定义的浅灰色。

1
2
3
.sub-level { 
  background: #ccc; 
}

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