本文讲解如何精准选中除第一个子元素外的其他 `.label` 元素，并修正常见误用（如错误组合 `:not` 与 `:nth-child`、忽略元素显示模式），提供可运行的 css 解决方案及 html 结构规范。
在实际开发中，常需为表单中的多个 <label> 元素统一添加上边距（如 margin-top: 20px），但跳过第一个标签——这看似简单，却极易因选择器逻辑错误或 HTML/CSS 基础特性理解偏差而失效。
❌ 常见错误分析
原始写法：
.form-group:not(:nth-child(1)) + .label {
margin-top: 20px;
}存在三处关键问题：
- 语法无效：:nth-child(1) 是伪类，不能直接作为 :not() 的参数；正确写法应为 :not(:nth-child(1))（已满足），但语义仍不匹配目标；
- 选择器逻辑错位：.form-group:not(:nth-child(1)) + .label 意图选取「非第一个 .form-group 后紧邻的 .label」，但 .label 并非 .form-group 的兄弟元素，而是其后代元素，+（相邻兄弟选择器）完全失效；
- <label> 默认为 inline 元素：margin-top 对 inline 元素无效，必须显式设置 display: inline-block 或 block 才能生效。
✅ 正确解决方案
目标：仅对第二个及之后的 .form-group 内部的 .label 应用 margin-top。
立即学习“前端免费学习笔记（深入）”；
推荐选择器（语义清晰、兼容性好）：
.form-group:nth-child(n+2) .label {
margin-top: 20px;
display: inline-block; /* 关键：启用 vertical margin */
}✅ 优势说明：
- :nth-child(n+2) 精准匹配从第 2 个开始的所有 .form-group（等价于“除第一个外的所有”），比 :not(:nth-child(1)) 更直观且无兼容风险；
- 使用空格后代选择器 .form-group .label，准确命中嵌套结构；
- 显式声明 display: inline-block，确保 margin-top 生效（也可用 display: block，视布局需求而定）。
✅ 完整可运行示例
<div class="form-group"> <label class="label">用户名</label> </div> <div class="form-group"> <label class="label">邮箱</label> <!-- 此处将获得 20px 上边距 --> </div> <div class="form-group"> <label class="label">密码</label> <!-- 此处也将获得 20px 上边距 --> </div>
.label {
display: inline-block; /* 统一基础样式，避免意外 */
}
.form-group:nth-child(n+2) .label {
margin-top: 20px;
color: #333;
}⚠️ 注意事项
- 避免滥用 :not(:nth-child(1))：它虽语法合法，但可读性差，且在复杂嵌套中易引发歧义；
- 确保 .form-group 是父容器的直系子元素，否则 :nth-child 将按父级所有子元素（含文本节点、其他标签）计数；
- 若需兼容旧版 IE（<9），nth-child 不受支持，建议改用 JavaScript 动态添加 class，或采用 .form-group:first-child ~ .form-group .label（需调整 HTML 结构）。
掌握 :nth-child 与后代选择器的组合逻辑，辅以对元素显示模式的准确理解，即可稳健实现“除首项外全部样式化”的常见需求。
