小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
什么是结构伪类选择器
CSS 中的结构伪类选择器是根据 HTML 页面中元素之间的关系来定位 HTML 元素，从而减少对 HTML 元素的 id 属性和 class 属性的依赖。
CSS 结构伪类选择器如下表所示：
| 伪类选择器 | 作用 |
|---|---|
| selector:first-child | 用来定位一组兄弟元素中的第一个元素 |
| selector:last-child | 用来定位一组兄弟元素中的最后一个元素 |
| selector:nth-child(n) | 用来定位一组兄弟元素中的第 n 个元素 |
| selector:nth-last-child(n) | 用来定位一组兄弟元素中倒序方式的第 n 个元素 |
| selector:first-of-type | 用来定位一组同类型的兄弟元素中的第一个元素 |
| selector:last-of-type | 用来定位一组同类型的兄弟元素中的最后一个元素 |
| selector:nth-of-type(n) | 用来定位一组同类型的兄弟元素中的第 n 个元素 |
| selector:nth-last-of-type(n) | 用来定位一组同类型的兄弟元素中倒序方式的第 n 个元素 |
| selector:only-child | 用来定位一个没有任何兄弟元素的元素 |
| selector:only-of-type | 用来定位一个没有任何同类型兄弟元素的元素 |
| selector:empty | 用来定位一个没有子级元素的元素，并且该元素也没有任何文本内容 |
| selector:root | 用来定位 HTML 页面中的根元素（``） |
:first-child 与 :last-child
:first-child 伪类可以使用 :nth-child(n) 伪类改写为 :nth-child(1)，而 :last-child 伪类可以使用 :nth-last-child(n) 伪类改写为 :nth-last-child(1)。
:first-child 伪类和 :last-child 伪类经常会引起误解。例如 td:first-child 是用来定位所有 <td> 元素中第一个作为子级元素的，而不是定位 <td> 元素的第一个子级元素。
:first-of-type 与 :last-of-type
:first-of-type 伪类与 :last-of-type 伪类的用法一定要和 :first-child 伪类与 :last-child 伪类的用法区分开。以 :first-of-type 伪类和 :first-child 伪类为例来说明：
- :first-of-type 伪类是定位一组同类型的兄弟元素中的第一个元素，不管这个元素在兄弟元素中的位置如何。
- :first-child 伪类是定位一组兄弟元素中的第一个元素，这些兄弟元素不一定是同类型的。
如果将上述示例代码中的 :first-of-type 伪类改写为 :first-child 伪类的话，将不会生效。
:nth-child(n) 与 :nth-last-child(n)
:nth-child(n) 伪类和 :nth-last-child(n) 伪类都是 CSS3 版本新增的选择器，这两个选择器的用法基本上是一致的。区别在于 :nth-last-child(n) 伪类是倒序方式定位元素，也就是说，:nth-last-child(n) 伪类是从一组元素的结尾开始的。
接下来，主要以 :nth-child(n) 伪类为例进行讲解。:nth-child(n) 伪类中的 n 参数的含义具有 3 种情况：
- 数字值：任意一个大于 0 的正整数。例如
#example td:nth-child(1)表示定位 ID 为 example 的父元素下所有<td>元素中的第一个元素。 - 关键字：odd 表示奇数，等同于 :nth-child(2n)；even 表示偶数，等同于 :nth-child(2n+1)。
- 格式为 (an+b) 公式：a 表示周期的长度（步长），n 表示计数器（从 0 开始），而 b 则表示偏移值。
:nth-child(n) 伪类的 n 参数用法中比较复杂的是使用 (an+b) 公式用法，如下示例列举了一些公式用法：
- :nth-child(5n)：定位元素的序号是 5 [=5×1]、10 [=5×2]、15 [=5×3] 等。
- :nth-child(3n+4)：定位元素的序号是 4 [=(3×0)+4]、7 [=(3×1)+4]、10 [=(3×2)+4]、13 [=(3×3)+4] 等。
- :nth-child(-n+3)：定位元素的序号是 3 [=-0+3]、2 [=-1+3]、1 [=-2+3]。
:nth-child(n) 伪类与 :nth-last-child(n) 伪类和 :nth-of-type(n) 伪类与 :nth-last-of-type(n) 伪类的区别，类似于 :first-of-type 伪类与 :last-of-type 伪类和 :first-child 伪类与 :last-child 伪类的区别。
:empty
:empty 伪类是用来定位没有任何子级元素或文本内容的元素，其中文本内容包含了空白。但是 HTML 的注释是不影响 :empty 伪类定位元素的。
