2.6 伪类

伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种。

  • UI（User Interface，用户界面）伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。
  • 结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式。

2.6.1 UI伪类

UI伪类会基于特定HTML元素的状态应用样式。最常使用UI伪类的元素是链接（a元素），利用UI伪类，链接可以在用户鼠标悬停时改变文本颜色，或者去掉文本的下划线。此外，还可以有其他响应方式，比如悬停时显示一个信息面板，相关内容在我们讨论交互组件的时候再聊。

1. 链接伪类

针对链接的伪类一共有4个，因为链接始终会处于如下4种状态之一。

  • Link。此时，链接就在那儿等着用户点击。
  • Visited。用户此前点击过这个链接。
  • Hover。鼠标指针正悬停在链接上。
  • Active。链接正在被点击（鼠标在元素上按下，还没有释放）。以下就是这些状态对应的4个伪类选择符（使用了a选择符和一些示例声明）：
  1. a:link {color:black;}
  2. a:visited {color:gray;}
  3. a:hover {text-decoration:none;}
  4. a:active {color:red;}

由于这4个伪类的特指度（本章后面再讨论特指度）相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期结果。为了好记，我建议大家可以这么想：“LoVe? HA!”大写字母就是每个伪类的头一个字母。

选择符中与众不同的:（冒号）好像在向我们宣示：“我是一个伪类！”

一个冒号（:）表示伪类，两个冒号（::）表示CSS3新增的伪元素。尽管浏览器目前都支持对CSS 1和CSS 2的伪元素使用一个冒号，但希望你能习惯于用双冒号代替单冒号，因为这些单冒号的伪元素最终可能都会被淘汰掉。更多相关信息，可以参见这里：http://www.w3.org/TR/2005/WD-css3-selectors-20051215/#pseudo-elements。

根据前面的声明，链接在初始状态时是黑色（默认带下划线）。当鼠标移到上面时（悬停状态），链接的下划线消失，颜色仍然是黑色。当用户在链接上按下鼠标时（活动状态），链接变成红色。而在链接被点击后，也就是鼠标在链接上按下，又在链接上释放后，会触发浏览器打开URL，此后（或者更准确地说，到浏览器访问历史中的这个URL过期或被用户删除之前），链接会一直显示为灰色。

不一定非得把这4个状态都写出来。如果你只想定义:link和:hover状态，没问题，大多数情况下这也足够了。但如果你有一个长长的目录链接，那么用稍浅一些的颜色显示出那些已经访问过（即点击过）的链接，对用户会很有帮助。然而，修改导航条visited状态的颜色就没有什么意义了。

我一般就定义一个a状态和一个:hover状态，后者就是为了让用户（在鼠标悬停时）知道相应的元素是不是可以点。

以这种方式为链接的不同的状态添加样式是不错，但要发挥这些链接伪类的真正威力，还是得把它们用到上下文选择符中。这样，就可以让不同区块内的链接具有不同的外观和行为了。比如，稍后我们会看到，通过在上下文选择符中使用链接伪类，可以轻易地为nav、footer、aside和article元素中的链接应用不同的外观和行为。

注意，有些伪类可以用于任何元素，而不仅仅是a元素。比如，下面这条规则能让段落背景在鼠标悬停时变成灰色：

  1. p:hover {background-color:gray;}

2.:focus伪类

  1. e:focus

在这个以及后续的例子中，e表示任何元素，如p、h1、section，等等。

表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。下面的规则

  1. input:focus {border:1px solid blue;}

会在光标位于input字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。

3. :target伪类

  1. e:target

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target伪类选中它。

对于下面这个链接

  1. <a href="#more_info">More Information</a>

位于页面其他地方、ID为more_info的那个元素就是目标。该元素可能是这样的：

  1. <h2 id="more_info">This is the information you are looking for.</h2>

那么，如下CSS规则

  1. #more_info:target {background:#eee;}

会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景。

维基百科在其引证中大量使用了:target伪类。维基百科的引证链接就是正文里那些不起眼的数字链接。引证本身则位于长长的页面的最下方。如果没有:target应用的突出显示，很难知道你点击的链接对应着一大堆引证中的哪一个。

2.6.2 结构化伪类

结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是什么。

1.:first-child和:last-child

  1. e:first-child
  2. e:last-child

:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。比如，把下面的规则

  1. ol.results li:first-child {color:blue;}

应用给以下标记：

  1. <ol class="results">
  2.     <li>My Fast Pony</li>
  3.     <li>Steady Trotter</li>
  4.     <li>Slow Ol' Nag</li>
  5. </ol>

文本“My Fast Pony”就会变成蓝色。如果选择符改成这样：

  1. ol.results li:last-child {color:red;}

那变成红色的文本就是“Slow Ol' Nag”了。

2.:nth-child

  1. e:nth-child(n)

e表示元素名，n表示一个数值（也可以使用odd或even）。

例如，

  1. li:nth-child(3)

会选择一组列表项中的每个第三项。

:nth-child伪类最常用于提高表格的可读性，比如像第6章中那样，对表格的所有行交替应用不同颜色。

还有其他一些结构化伪类，完整的信息请参考这里：http://www.stylinwithcss.com。