CSS 结构伪类选择器
目录
1. 基础结构伪类
1.1. :root
:empty
:not()
2. 子元素位置伪类
:first-child 和 :last-child
:nth-child()
:nth-last-child()
:only-child
3. 同类型元素位置伪类
:first-of-type 和 :last-of-type
:nth-of-type()
:nth-last-of-type()
:only-of-type
4. 实际应用示例
表格样式优化
列表样式处理
卡片布局
5. 高级技巧
组合使用
复杂选择器
6. 浏览器兼容性
7. 性能考虑
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 代码。