CSS3 基础 - CSS3 选择器 - 结构性伪类选择器

核心知识点

结构性伪类选择器的基本概念
常见的结构性伪类选择器
结构性伪类选择器的语法和使用方法
结构性伪类选择器的优先级
结构性伪类选择器的最佳实践
结构性伪类选择器的性能考虑

学习目标

掌握结构性伪类选择器的基本概念和语法
理解常见的结构性伪类选择器及其用途
能够正确使用结构性伪类选择器进行元素定位
了解结构性伪类选择器的最佳实践和性能考虑
区分不同类型结构性伪类选择器的适用场景

重点难点

重点：结构性伪类选择器的语法和常见类型
难点：结构性伪类选择器的复杂组合使用和性能优化

理论讲解

结构性伪类选择器的基本概念

结构性伪类选择器用于根据元素在文档树中的位置或结构关系来选择元素。它们以冒号 (:) 开头，后面跟着伪类名称。结构性伪类选择器的基本语法格式如下：

selector:pseudo-class {
  /* CSS 属性 */
}

常见的结构性伪类选择器

CSS3 提供了多种结构性伪类选择器，主要包括：

位置相关伪类：
- :first-child - 选择作为第一个子元素的元素
- :last-child - 选择作为最后一个子元素的元素
- :nth-child(n) - 选择作为第 n 个子元素的元素
- :nth-last-child(n) - 选择作为倒数第 n 个子元素的元素
- :only-child - 选择作为唯一子元素的元素
类型相关伪类：
- :first-of-type - 选择作为其类型的第一个子元素的元素
- :last-of-type - 选择作为其类型的最后一个子元素的元素
- :nth-of-type(n) - 选择作为其类型的第 n 个子元素的元素
- :nth-last-of-type(n) - 选择作为其类型的倒数第 n 个子元素的元素
- :only-of-type - 选择作为其类型的唯一子元素的元素
空元素伪类：
- :empty - 选择没有子元素且没有文本内容的元素
根元素伪类：
- :root - 选择文档的根元素（HTML 文档中为 html 元素）

结构性伪类选择器的优先级

结构性伪类选择器的优先级与类选择器和属性选择器相同，为 10。在 CSS 优先级规则中：

选择器类型	优先级值
ID 选择器	100
类选择器、属性选择器、伪类选择器	10
元素选择器、伪元素选择器	1
通配符选择器	0

结构性伪类选择器的使用场景

结构性伪类选择器适用于以下场景：

列表样式：为列表的第一个、最后一个或特定位置的项设置不同样式
表格样式：为表格的奇数行、偶数行或特定行设置不同样式
布局结构：根据元素在布局中的位置设置不同样式
条件样式：为满足特定结构条件的元素设置样式

代码示例

位置相关伪类选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>位置相关伪类选择器</title>
  <style>
    /* 列表的第一个子元素 */
    ul li:first-child {
      font-weight: bold;
      color: #4CAF50;
    }
    
    /* 列表的最后一个子元素 */
    ul li:last-child {
      font-style: italic;
      color: #F44336;
    }
    
    /* 列表的第二个子元素 */
    ul li:nth-child(2) {
      background-color: #E3F2FD;
    }
    
    /* 列表的奇数子元素 */
    ul li:nth-child(odd) {
      padding: 5px 0;
    }
    
    /* 列表的偶数子元素 */
    ul li:nth-child(even) {
      padding: 10px 0;
    }
    
    /* 唯一的子元素 */
    div:only-child {
      border: 1px solid #9E9E9E;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h3>列表样式示例</h3>
  <ul>
    <li>第一项（第一个子元素）</li>
    <li>第二项（第二个子元素，偶数）</li>
    <li>第三项（奇数）</li>
    <li>第四项（偶数）</li>
    <li>第五项（最后一个子元素，奇数）</li>
  </ul>
  
  <h3>唯一子元素示例</h3>
  <div>
    <p>这是唯一的子元素</p>
  </div>
  
  <div>
    <p>第一个子元素</p>
    <p>第二个子元素</p>
  </div>
</body>
</html>

类型相关伪类选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类型相关伪类选择器</title>
  <style>
    /* 第一个段落 */
    p:first-of-type {
      font-weight: bold;
      color: #2196F3;
    }
    
    /* 最后一个段落 */
    p:last-of-type {
      font-style: italic;
      color: #9C27B0;
    }
    
    /* 第二个段落 */
    p:nth-of-type(2) {
      background-color: #FFF3E0;
    }
    
    /* 唯一的段落 */
    p:only-of-type {
      border: 1px solid #FFC107;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div>
    <h3>类型相关伪类选择器示例</h3>
    <p>第一个段落（第一个 p 类型元素）</p>
    <div>这是一个 div 元素</div>
    <p>第二个段落（第二个 p 类型元素）</p>
    <p>第三个段落（最后一个 p 类型元素）</p>
  </div>
  
  <div>
    <h3>唯一类型元素示例</h3>
    <p>这是唯一的段落（唯一的 p 类型元素）</p>
  </div>
</body>
</html>

空元素和根元素伪类选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>空元素和根元素伪类选择器</title>
  <style>
    /* 根元素 */
    :root {
      background-color: #F5F5F5;
      font-family: Arial, sans-serif;
    }
    
    /* 空元素 */
    div:empty {
      width: 200px;
      height: 200px;
      border: 2px dashed #9E9E9E;
      margin: 20px 0;
    }
  </style>
</head>
<body>
  <h3>空元素示例</h3>
  <div>这是一个非空的 div 元素</div>
  <div></div> <!-- 空元素 -->
  <div>这是另一个非空的 div 元素</div>
</body>
</html>

表格样式示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格样式示例</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    
    th, td {
      padding: 10px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    
    /* 表头 */
    th {
      background-color: #4CAF50;
      color: white;
    }
    
    /* 奇数行 */
    tr:nth-child(odd) {
      background-color: #f2f2f2;
    }
    
    /* 偶数行 */
    tr:nth-child(even) {
      background-color: #ffffff;
    }
    
    /* 鼠标悬停 */
    tr:hover {
      background-color: #E3F2FD;
    }
  </style>
</head>
<body>
  <h3>表格样式示例</h3>
  <table>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>35</td>
      <td>产品经理</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>28</td>
      <td>开发人员</td>
    </tr>
  </table>
</body>
</html>

ASCII 示意图

结构性伪类选择器类型示意图

+-------------------------+
| 结构性伪类选择器类型     |
+-------------------------+
| 位置相关伪类             |
|   - :first-child        |
|   - :last-child         |
|   - :nth-child(n)       |
|   - :nth-last-child(n)  |
|   - :only-child         |
+-------------------------+
| 类型相关伪类             |
|   - :first-of-type      |
|   - :last-of-type       |
|   - :nth-of-type(n)     |
|   - :nth-last-of-type(n) |
|   - :only-of-type       |
+-------------------------+
| 其他结构性伪类           |
|   - :empty              |
|   - :root               |
+-------------------------+

结构性伪类选择器使用场景示意图

+-------------------------+
| 结构性伪类选择器适用场景  |
+-------------------------+
| ✓ 列表样式               |
|   - 第一个/最后一个列表项 |
|   - 奇数/偶数列表项       |
+-------------------------+
| ✓ 表格样式               |
|   - 表头样式             |
|   - 奇数/偶数行样式       |
+-------------------------+
| ✓ 布局结构               |
|   - 容器中的特定位置元素   |
|   - 唯一元素样式         |
+-------------------------+
| ✓ 条件样式               |
|   - 空元素样式           |
|   - 根元素样式           |
+-------------------------+

常见问题与解决方案

问题 1：结构性伪类选择器的计算问题

症状：:nth-child(n) 选择器的计算结果不按预期显示
解决方案：

理解 n 的含义：n 从 0 开始计数
掌握常见的计算公式：odd（奇数）、even（偶数）、an+b（自定义模式）

问题 2：结构性伪类选择器的浏览器兼容性

症状：某些旧浏览器可能不支持所有类型的结构性伪类选择器
解决方案：

对于需要支持旧浏览器的项目，检查结构性伪类选择器的兼容性
提供适当的降级方案
考虑使用现代 CSS 预处理工具

问题 3：结构性伪类选择器的性能问题

症状：在大型页面中使用复杂的结构性伪类选择器可能导致性能下降
解决方案：

避免在大型页面中过度使用复杂的结构性伪类选择器
结合元素选择器使用，如 ul li:nth-child(odd) 比 :nth-child(odd) 性能更好
对于频繁访问的元素，考虑使用类选择器

实战练习

练习 1：列表样式设计

使用结构性伪类选择器为列表添加以下样式：

第一个列表项：加粗，绿色文字
最后一个列表项：斜体，红色文字
奇数列表项：背景色 #f9f9f9
偶数列表项：背景色 #f0f0f0
第三个列表项：黄色背景，黑色文字

练习 2：表格样式设计

使用结构性伪类选择器为表格添加以下样式：

表头：蓝色背景，白色文字
奇数行：白色背景
偶数行：浅灰色背景
鼠标悬停：浅蓝色背景
第一列：加粗文字

练习 3：卡片布局设计

使用结构性伪类选择器为卡片布局添加以下样式：

第一个卡片：顶部蓝色边框
最后一个卡片：顶部绿色边框
卡片组中的唯一卡片：添加阴影效果
空卡片：显示虚线边框和提示文字

代码优化建议

结合元素选择器：使用 element:nth-child(n) 而不是 :nth-child(n)，提高性能
避免过度复杂：尽量使用简单的结构性伪类选择器，避免多层嵌套
合理使用：在适合的场景使用结构性伪类选择器，不要过度依赖
考虑性能：在大型页面中，注意结构性伪类选择器的性能影响
使用预处理器：考虑使用 CSS 预处理器（如 Sass、Less）来简化复杂的结构性伪类选择器

总结

结构性伪类选择器是 CSS3 中一种强大的选择器，用于根据元素在文档树中的位置或结构关系来选择元素。它们具有以下特点：

语法简洁：使用 :pseudo-class 格式
功能丰富：提供多种结构性伪类选择器，满足不同的选择需求
优先级适中：优先级与类选择器相同，便于样式管理
灵活性高：可以根据元素的位置和结构关系进行选择

在实际开发中，结构性伪类选择器特别适合用于列表样式、表格样式、布局结构和条件样式等场景。通过合理使用结构性伪类选择器，可以使 CSS 代码更加简洁、语义化，同时提高代码的可维护性。

通过本教程的学习，你应该已经掌握了结构性伪类选择器的基本概念和常见类型，能够在实际项目中正确应用结构性伪类选择器进行页面样式设计。