CSS:first-child与nth-child组合使用技巧

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《CSS:first-child与nth-child组合应用实例》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

: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;
}

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>

4. 表单中跳过第一个输入框的验证样式

假设你用伪类标记无效输入，但想跳过第一个字段（如用户名不参与验证）：

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组合使用技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！