:first-child和:nth-child()可结合使用实现精准样式控制，如网格布局每组首项、表格奇数行除首行、导航菜单分组间距及表单跳过首个输入的验证样式，通过选择器并列或层叠覆盖达成复合逻辑。
在CSS中，:first-child 和 :nth-child() 都是结构伪类，用于根据元素在父容器中的位置来选择特定子元素。虽然它们可以单独使用，但在某些场景下组合使用（实际是分别应用在不同选择器中）能更精准地控制样式。下面通过几个实用案例说明如何结合这两个伪类实现特定布局效果。
1. 列表中仅第一个项目特殊样式
当需要为列表中的第一个子项设置独特样式时，可以直接使用 :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;
}
说明：这里虽然 :nth-child(3n+1) 已经包含了第一个元素，但显式写上 :first-child 可提高可读性或覆盖特殊情况。2. 表格或行内元素中排除首个并样式化奇数项
有时你想对除第一个以外的所有奇数位置元素应用样式。虽然不能直接“组合”伪类，但可以通过优先级覆盖实现逻辑组合。
示例：表格行中，从第二行开始，对奇数行着色，但跳过第一行
tr:nth-child(odd) {
background: #f0f0f0;
}
tr:first-child {
background: white; /* 覆盖第一行的 odd 效果 */
}
这样实现了“奇数行有背景色，但第一行除外”的视觉效果，本质是利用样式的层叠关系模拟组合逻辑。3. 导航菜单中首项与其他项不同
导航栏常需让第一个菜单项没有左外边距，而其余每两个项目中第一个加间距。
.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>这个例子中，:first-child 确保导航起点干净，而 :nth-child(3n+2) 实现分组间隔。两者共存于同一组元素，独立生效。4. 表单中跳过第一个输入框的验证样式
假设你用伪类标记无效输入，但想跳过第一个字段（如用户名不参与验证）：
input:invalid {
border: 2px solid red;
}
<p>input:first-child:invalid {
border: none; /<em> 排除第一个输入框的错误样式 </em>/
}</p>这里同时使用了两个伪类在一个选择器中 —— :first-child:invalid，这是真正的伪类组合，表示“既是第一个子元素又处于无效状态”的输入框。基本上就这些常见模式。:first-child 和 :nth-child() 不是直接“组合函数”，但可通过选择器并列、层叠或联合使用来实现复杂筛选逻辑。关键是理解它们各自匹配的条件以及CSS优先级如何作用。
