重温CSS系列（三）

常用的选择器

最常用的选择器类型是类型选择器和后代选择器。类型选择器用来寻找特定类型的元素，比如段落或标题元素，只需指定希望应用样式的元素的名称。类型选择器有时候也称为元素选择器或简单选择器。

p {color: black;}  
h1 {font-weight: bold;} 

后代选择器可用来寻找特定元素或元素组的后代。后代选择器由其他两个选择器之间的空格表示。在这个示例中，只缩进是块引用的后代的段落元素，其他所有段落不受影响。

blockquote p {padding-left: 2em;} 

这两种选择器适合于应用那些应用范围广的一般性样式。要想寻找更特定的元素，可以使用ID选择器和类选择器。顾名思义，这两种选择器用于寻找那些具有指定ID或类名的元素。ID选择器由一个#字符表示，类选择器由一个点号表示。下面示例中的第一条规则使简介段落中的文本以粗体显示，第二条规则让日期显示为绿色：

#intro {font-weight: bold;}  
.date-posted {color: #ccc;}  
 
<p id="intro">Happy Birthday Andy</p> 
<p class="date-posted">24/3/2009</p> 

前面提到过，许多CSS开发人员过度依赖类选择器和ID选择器。如果他们希望以一种方式对主内容区域中的标题应用样式，而在第二个内容区域中采用另一种方式，那么他们很可能创建两个类并且在每个标题上应用一个类。一种简单得多的方法是结合使用类型、后代、ID和类这几种选择器：

#main-content h2 {font-size: 1.8em;}  
#secondaryContent h2 {font-size: 1.2em;}  
 
<div id="main-content"> 
  <h2>Articles</h2>   
     ...  
</div> 
<div id="secondary-content"> 
  <h2>Latest news</h2> 
  ...  
</div> 

这是一个非常简单明朗的示例。但是，让你吃惊的是，只使用前面讨论的4种选择器就可以成功地找到许多元素。如果你发现自己在文档中添加了许多不必要的类，那么这可能是文档结构不合理的一个警告信号。这时应该分析这些元素之间的差异。你常常会发现唯一的差异是它们在页面上出现的位置。不要给这些元素指定不同的类，而应将一个类或ID应用于它们的祖先，然后使用后代选择器定位它们。

伪类

有时候，我们需要根据文档结构之外的其他条件对元素应用样式，例如表单元素或链接的状态。这要使用伪类选择器来完成。

/* makes all unvisited links blue */  
a:link {color:blue;}  
 
/* makes all visited links green */  
a:visited {color:green;}  
 
/* makes links red when hovered or activated.  
focus is added for keyboard support */  
a:hover, a:focus, a:active {color:red;}  
 
/* makes table rows red when hovered over */  
tr:hover {background-color: red;}  
 
/* makes input elements yellow when focus is applied */  
input:focus {background-color:yellow;} 

:link和:visited称为链接伪类，只能应用于锚元素。:hover、:active和:focus称为动态伪类，理论上可以应用于任何元素。大多数浏览器都支持这个功能。但是，IE 6只注意应用于锚链接的:active和:hover选择器，完全忽略:focus。IE 7在任何元素上都支持:hover，但是忽略:active和:focus。

最后，值得指出的是：通过把伪类连接在一起，可以创建更复杂的行为，比如在已访问链接和未访问链接上实现不同的鼠标悬停效果。

/* makes all visited linkes olive on hover */  
a:visited:hover {color:olive;}