:first-child和:nth-child()可结合使用实现精准样式控制，如网格布局每组首项、表格奇数行除首行、导航菜单分组间距及表单跳过首个输入的验证样式，通过选择器并列或层叠覆盖达成复合逻辑。
在CSS中，:first-child 和 :nth-child() 都是结构伪类，用于根据元素在父容器中的位置来选择特定子元素。虽然它们可以单独使用，但在某些场景下组合使用（实际是分别应用在不同选择器中）能更精准地控制样式。下面通过几个实用案例说明如何结合这两个伪类实现特定布局效果。
当需要为列表中的第一个子项设置独特样式时，可以直接使用 :first-child。但有时你可能想在满足某种位置规律的子元素中再筛选第一个，这时可配合 :nth-child() 使用。
例如：一个每三列一组的网格布局，只给每组的第一个元素添加左侧边距：HTML:
<div class="grid"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> </div>
CSS:
立即学习“前端免费学习笔记（深入）”；
.grid div {
display: inline-block;
width: 30%;
margin-left: 10px;
}
/* 每组的第一个：第1、第4、第7...个 */
.grid div:nth-child(3n+1) {
margin-left: 0;
}
/* 特别处理整体第一个元素，避免被其他规则干扰 */
.grid div:first-child {
margin-left: 0;
}
有时你想对除第一个以外的所有奇数位置元素应用样式。虽然不能直接“组合”伪类，但可以通过优先级覆盖实现逻辑组合。
示例：表格行中，从第二行开始，对奇数行着色，但跳过第一行
tr:nth-child(odd) {
background: #f0f0f0;
}
tr:first-child {
background: white; /* 覆盖第一行的 odd 效果 */
}
导航栏常需让第一个菜单项没有左外边距，而其余每两个项目中第一个加间距。
.nav-item {
display: inline-block;
margin-left: 20px;
}
<p>/<em> 周期性选择：第2、5、8...个开始加样式 </em>/
.nav-item:nth-child(3n+2) {
margin-left: 40px;
}</p><p>/<em> 第一个项目始终无左边距 </em>/
.nav-item:first-child {
margin-left: 0;
}</p>假设你用伪类标记无效输入，但想跳过第一个字段（如用户名不参与验证）：
input:invalid {
border: 2px solid red;
}
<p>input:first-child:invalid {
border: none; /<em> 排除第一个输入框的错误样式 </em>/
}</p>基本上就这些常见模式。:first-child 和 :nth-child() 不是直接“组合函数”，但可通过选择器并列、层叠或联合使用来实现复杂筛选逻辑。关键是理解它们各自匹配的条件以及CSS优先级如何作用。
以上就是css伪类:first-child与nth-child组合使用案例的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
237
收藏
