HTML5与CSS3基础语法自学教程（二十五）
本文首发于【前端课湛】微信公众号。可以在微信里搜索【前端课湛】关注，第一时间看文章！
导读：本小节主要讲解 CSS 中的结构伪类选择器的内容，其中包含了结构伪类选择器的概念以及各个结构伪类选择器的用法。虽然结构伪类选择器不一定要和表格元素配合使用，但在表格元素中使用结构伪类是最为常见的应用之一。
什么是结构伪类选择器
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 页面中的根元素（<html>） |
在上述表中，使用到的 n 是一个整数，而且是从 1 开始的正整数。也就是说，第一个元素的序号是 1，不是 0。当 n 的值为 0 时，则表示不定位任何 HTML 元素。
:first-child 与 :last-child
:first-child 伪类是 CSS2 版本中的选择器。在最初定义 :first-child 伪类时，所定位的这一组兄弟元素是必须具有父级元素的。从 CSS4 版本开始，父级元素已经不再是必须的。
:last-child 伪类则是 CSS3 版本中新增的选择器。使用 :last-child 伪类时，需要注意浏览器的兼容性问题。
如下示例代码展示了 :first-child 伪类和 :last-child 伪类的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first-child与last-child伪类</title>
<style>
#example-element td {
background-color: lightsalmon;
padding: 5px 10px;
}
#example-element td:first-child {
border-top-left-radius: 5px;
}
#example-element td:last-child {
border-top-right-radius: 5px;
}
</style>
</head>
<body>
<table id="example-element">
<tr>
<td>公司介绍</td>
<td>产品中心</td>
<td>新闻动态</td>
</tr>
</table>
</body>
</html>
上述示例代码运行效果如下图所示：
: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 伪类都是 CSS3 版本新增的选择器。在最初定义 :first-of-type 伪类时，所定位的这一组兄弟元素是必须具有父级元素的。从 CSS4 版本开始，父级元素已经不再是必须的。
如下示例代码展示了 :first-of-type 伪类和 :last-of-type 伪类的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>first-of-type与last-of-type伪类</title>
<style>
table {
display: table;
border: 1px solid #139;
width: 100%;
}
td,
th {
border: 2px solid #a19;
padding: .25rem .5rem;
}
#example-element td:first-of-type,
#example-element td:last-of-type {
text-align: center;
}
</style>
</head>
<body>
<table id="example-element">
<tbody>
<tr>
<th>序号</th>
<th>姓名</th>
<th>地点</th>
</tr>
<tr>
<th>1</th>
<td>李雷</td>
<td>北京</td>
</tr>
<tr>
<th>2</th>
<td>韩梅梅</td>
<td>上海</td>
</tr>
<tr>
<th>3</th>
<td>露西</td>
<td>深圳</td>
</tr>
<tr>
<th>4</th>
<td>小明</td>
<td>鹤岗</td>
</tr>
</tbody>
</table>
</body>
</html>
上述示例代码运行效果如下图所示：
: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 的父元素下所有元素中的第一个元素。关键字：odd 表示奇数，等同于 :nth-child(2n)；even 表示偶数，等同于 :nth-child(2n+1)。
格式为 (an+b) 公式：a 表示周期的长度（步长），n 表示计数器（从 0 开始），而 b 则表示偏移值。
如下示例代码展示了 :nth-child(n) 伪类的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>nth-child伪类</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
td {
padding: 5px;
border-top: 2px solid lightslategray;
text-align: center;
}
table tr:nth-child(1) {
font-weight: bold;
}
table tr:nth-child(odd) {
background-color: lightgray;
}
</style>
</head>
<body>
<table id="example-element">
<tbody>
<tr>
<td>序号</td>
<td>姓名</td>
<td>地点</td>
</tr>
<tr>
<td>1</td>
<td>李雷</td>
<td>北京</td>
</tr>
<tr>
<td>2</td>
<td>韩梅梅</td>
<td>上海</td>
</tr>
<tr>
<td>3</td>
<td>露西</td>
<td>深圳</td>
</tr>
<tr>
<td>4</td>
<td>小明</td>
<td>鹤岗</td>
</tr>
</tbody>
</table>
</body>
</html>
上述示例代码运行效果如下图所示：
: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 伪类定位元素的。
如下示例代码展示了 :empty 伪类的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>empty伪类</title>
<style>
.box {
background: pink;
height: 80px;
width: 80px;
float: left;
margin-left: 20px;
}
.box:empty {
background: lime;
}
</style>
</head>
<body>
<div class="box"><!-- 这是一个注释 --></div>
<div class="box">这个元素的背景是粉色的</div>
<div class="box">
<!-- 这是一个注释 -->
</div>
</body>
</html>
上述示例代码运行效果如下图所示：
总结
本小节讲解了 CSS 伪类选择器中的结构伪类选择器，结构伪类选择器是根据 HTML 元素之间的关系来定位 HTML 页面中的元素。学习的过程中需要注意相似结构伪类选择器之间的区别，以及 CSS 版本的问题。
预告：下一章，我们将讲解 CSS 中的盒子模型内容。
如要转载本文，请先加作者微信(2080954535，与 QQ 同号)，获得转载许可。原创不易，请尊重作者劳动！