CSS结构伪类选择器

结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。

结构伪类选择器很容易遭到误解，需要特别强调。如，p:first-child表示选择父元素下的第一个子元素 p，而不是选择 p 元素的第一个子元素。

需要注意的是，结构伪类选择器中，子元素的序号是从 1 开始的，也就是说，第一个子元素的序号是 1，而不是 0。换句话说，当参数 n 的计算结果为 0 时，将不选择任何元素。

接下来，简单介绍 :first-child、:last-child、:nth-child、:nth-of-type、:empty 这几个选择器，其他选择器的功能在表格中已经描述清楚，不再赘述。

:first-child 和 :last-child分别用于选择元素的子元素中，符合条件的第一个和最后一个子元素。:first-child 伪类在CSS2就已经存在，:last-child 伪类是CSS3新增的伪类。

如，对于下面的 tab 菜单，希望该 tab 菜单的第一个元素的左上角，和最后一个元素的右上角应用圆角。HTML代码如下：

在CSS3之前，直接选取 class 为 tab 元素的第一个或最后一个子元素，是不可能的。现在，通过 :first-child 和 :last-child 伪类，就可以轻松实现。CSS代码如下：

上述代码的运行结果如图 2‑19 所示：

E:nth-child(n) 用于选择某个父元素的一个或多个特定的子元素。n 表示不确定的数字，th 是英语中序数词的后缀。因此，nth-child 就表示第 n 个子元素。该选择器的参数 n 可以是数字、公式或关键字：

1）数字：可以是任何大于 0 的正整数。如，.tab li:nth-child(2)，表示选择 class 为 .tab 的父元素下，第 2 个 li 子元素。

2）公式：格式为 (an + b)。其中，a表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。如，:nth-child(n+4) 选取序号大于等于 4 的元素，:nth-child(-n+4) 选取序号小于等于 4 的元素，:nth-child(2n) 选取序号为偶数的元素，:nth-child(2n+1) 选取序号为奇数的元素，:nth-child(3n) 选取序号为3、6、9…的子元素（即“隔二选一”），:nth-child(3n+1) 选取序号为1、4、7、10…的子元素，等等。

3）关键字：只有odd 和 even 两个关键字。odd表示选取序号为奇数的元素，效果等同于 :nth-child(2n-1) 和 :nth-child(2n+1)；even表示选取序号为偶数的元素，效果等同于 :nth-child(2n)。

:nth-of-type(n) 与 :nth-child(n) 的作用和使用方法完全相同，唯一不同的是，它用来选择某个父元素下，指定类型的一个或多个特定的子元素。

选择空节点，即不包含任何子元素的元素，也就是内容为空白的元素。因为文本节点本身也被看作子元素，所以，包含文本节点的元素就不是空元素，哪怕是一个空格。如：

我包含文本节点，我不是空元素

对上述HTML代码调用样式如下：

上述HTML代码中，由于最后一个 p 元素是空节点，则会被 p:empty 选择器选中。于是，它就会表现为一个高度为 25px，背景色为灰色，带有1px 的橙色边框的矩形框。运行结果如图 2‑20 所示：

:nth-child 与 :nth-of-type 的区别：

:nth-child 和 :nth-of-type 都能选择子元素，它们到底有什么区别呢？

区别其实也很简单，E:nth-child(n) 是把所有子元素作为选择对象，选择其中的第n个子元素，且这个子元素的类型必须是 E，如果不是，则选择失败。而 E:nth-of-type(n) 则先把类型为E的所有子元素选择出来，从1开始编号，然后把这些子元素作为选择对象，选择其中的第n个。假如有以下HTML代码片段： 

zero

上述代码中，.demo li:nth-child(2)是从 .demo 的所有子元素中找第二个子元素，且第二个子元素的类型必须是 li，选择结果为one节点；.demo li:nth-of-type(2) 先把 .demo 的所有类型为 li 的子元素找出来，然后选择其中的第 2 个，选择结果为 two 节点。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。