CSS 结构伪类选择器

[1. 基础结构伪类](#1. 基础结构伪类)

[1.1. :root](#1.1. :root)

:empty

:not()

[2. 子元素位置伪类](#2. 子元素位置伪类)

[:first-child 和 :last-child](#:first-child 和 :last-child)

:nth-child()

:nth-last-child()

:only-child

[3. 同类型元素位置伪类](#3. 同类型元素位置伪类)

[:first-of-type 和 :last-of-type](#:first-of-type 和 :last-of-type)

:nth-of-type()

:nth-last-of-type()

:only-of-type

[4. 实际应用示例](#4. 实际应用示例)

[5. 高级技巧](#5. 高级技巧)

[6. 浏览器兼容性](#6. 浏览器兼容性)

[7. 性能考虑](#7. 性能考虑)

[8. 最佳实践](#8. 最佳实践)

结构伪类选择器是 CSS 中一类特殊的选择器，它们基于元素在文档树中的位置和结构关系来选择元素，而不需要为元素添加额外的类名或 ID。

1. 基础结构伪类

1.1. :root

选择文档的根元素（HTML 文档中就是 <html> 元素）

复制代码

:root {
  --main-color: #333;
  --accent-color: #007bff;
}

/* 等价于 html { ... }，但优先级更高 */

:empty

选择没有任何子元素（包括文本节点）的元素

复制代码

/* 隐藏空的div */
div:empty {
  display: none;
}

/* 为p元素添加提示文本（如果为空） */
p:empty::before {
  content: "暂无内容";
  color: #999;
}

:not()

否定选择器，选择不匹配指定选择器的元素

复制代码

/* 选择除了第一个div之外的所有div */
div:not(:first-child) {
  margin-top: 20px;
}

/* 选择除了类名为special之外的所有p元素 */
p:not(.special) {
  color: #333;
}

2. 子元素位置伪类

:first-child 和 :last-child

选择父元素的第一个和最后一个子元素

复制代码

/* 选择父元素的第一个子元素 */
:first-child {
  margin-top: 0;
}

/* 选择父元素的最后一个子元素 */
:last-child {
  margin-bottom: 0;
}

/* 选择父元素的第一个p子元素 */
p:first-child {
  font-weight: bold;
}

:nth-child()

选择父元素的第 n 个子元素

复制代码

/* 基本用法 */
:nth-child(3) {
  /* 选择第3个子元素 */
}
:nth-child(2n) {
  /* 选择偶数位置的元素 */
}
:nth-child(2n + 1) {
  /* 选择奇数位置的元素 */
}
:nth-child(3n) {
  /* 选择第3、6、9...个元素 */
}

/* 关键字 */
:nth-child(even) {
  /* 等价于 2n */
}
:nth-child(odd) {
  /* 等价于 2n+1 */
}
:nth-child(n) {
  /* 选择所有子元素 */
}

/* 实际应用示例 */
/* 表格隔行变色 */
tr:nth-child(2n) {
  background-color: #f9f9f9;
}

/* 选择前3个li元素 */
li:nth-child(-n + 3) {
  font-weight: bold;
}

:nth-last-child()

从末尾开始计数的 nth-child

复制代码

/* 选择倒数第2个子元素 */
:nth-last-child(2) {
}

/* 选择最后3个元素 */
:nth-last-child(-n + 3) {
}

:only-child

选择父元素中唯一的子元素

复制代码

/* 只有一个子元素时应用样式 */
div:only-child {
  width: 100%;
  text-align: center;
}

3. 同类型元素位置伪类

:first-of-type 和 :last-of-type

选择父元素中同类型的第一个和最后一个元素

复制代码

/* 选择第一个h2元素 */
h2:first-of-type {
  margin-top: 0;
}

/* 选择最后一个p元素 */
p:last-of-type {
  margin-bottom: 0;
}

:nth-of-type()

选择父元素中同类型的第 n 个元素

复制代码

/* 选择第3个h3元素 */
h3:nth-of-type(3) {
  color: red;
}

/* 选择每个章节的第一个段落 */
p:nth-of-type(1) {
  font-size: 1.2em;
}

:nth-last-of-type()

从末尾开始计数的同类型元素选择器

复制代码

/* 选择倒数第二个p元素 */
p:nth-last-of-type(2) {
  font-style: italic;
}

:only-of-type

选择父元素中唯一的该类型元素

复制代码

/* 当只有一个h1元素时应用样式 */
h1:only-of-type {
  font-size: 2em;
  text-align: center;
}

4. 实际应用示例

表格样式优化

复制代码

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职位</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>工程师</td>
    </tr>
    <!-- 更多行... -->
  </tbody>
</table>

/* 表头样式 */
th:first-child {
  border-left: none;
}

th:last-child {
  border-right: none;
}

/* 表格行隔行变色 */
tr:nth-child(2n) {
  background-color: #f8f9fa;
}

/* 表格最后一行 */
tr:last-child td {
  border-bottom: 2px solid #333;
}

列表样式处理

复制代码

<ul>
  <li>第一个项目</li>
  <li>第二个项目</li>
  <li>第三个项目</li>
  <li>第四个项目</li>
  <li>第五个项目</li>
</ul>

/* 第一个和最后一个列表项特殊样式 */
li:first-child,
li:last-child {
  font-weight: bold;
}

/* 前三个列表项添加图标 */
li:nth-child(-n + 3)::before {
  content: "★ ";
  color: gold;
}

/* 偶数列表项背景色 */
li:nth-child(2n) {
  background-color: #f0f0f0;
}

卡片布局

复制代码

<div class="card-container">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
  <div class="card">卡片4</div>
  <div class="card">卡片5</div>
</div>

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

/* 第一行卡片 */
.card:nth-child(-n + 3) {
  grid-row: 1;
}

/* 第一个卡片特殊样式 */
.card:first-child {
  grid-column: span 2;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

/* 最后一个卡片 */
.card:last-child {
  background-color: #f8f9fa;
  border: 2px dashed #ccc;
}

5. 高级技巧

组合使用

复制代码

/* 选择第一个div类型的子元素，且是父元素的第三个子元素 */
div:first-of-type:nth-child(3) {
  background-color: yellow;
}

/* 选择最后一个p元素，但不是唯一的p元素 */
p:last-of-type:not(:only-of-type) {
  border-bottom: 1px solid #ccc;
}

复杂选择器

复制代码

/* 选择article中第一个h2标题 */
article h2:first-of-type {
  margin-top: 0;
}

/* 选择section中第三个div子元素 */
section > div:nth-child(3) {
  transform: scale(1.1);
}

/* 选择父元素中唯一的一个span */
div span:only-of-type {
  color: red;
}

6. 浏览器兼容性

大部分结构伪类选择器都有很好的浏览器支持：

:first-child - IE7+
:last-child - IE9+
:nth-child() - IE9+
:first-of-type 系列 - IE9+
:not() - IE9+（简单选择器），IE11+（复杂选择器）

7. 性能考虑

结构伪类选择器的性能从高到低：

:first-child / :last-child（性能较好）
:nth-child() 简单数字（如 :nth-child(3)）
:nth-child() 复杂数学表达式（如 :nth-child(3n+1)）
:nth-of-type() 系列（需要遍历同类型元素）

8. 最佳实践

优先使用简单选择器 ：如 :first-child 比 :nth-child(1) 性能更好
合理组合：结合使用多个伪类可以实现复杂效果
注意兼容性：在需要支持老版本 IE 时要特别注意
语义化：结构伪类使 CSS 更具语义性，减少对额外类名的依赖

结构伪类选择器是现代 CSS 的重要组成部分，它们让开发者能够基于文档结构创建灵活、动态的样式，而无需添加额外的类名或 JavaScript 代码。