如何在CSS中使用伪类:not(:first-child)实现除首元素外样式_结合:not调整边距和颜色

使用 :not(:first-child) 可为非首个子元素设置样式，常用于列表、卡片、导航等布局。例如 .card:not(:first-child) { margin-top: 8px; color: #999; } 可使除第一项外的卡片自动添加间距和变色，避免顶部多余空白，提升视觉一致性。该选择器基于兄弟关系判断，需确保目标元素为同级子元素，且可与其他伪类组合使用，如悬停效果。合理运用能减少冗余类名，使CSS更简洁易维护。

在CSS中，使用 :not(:first-child) 伪类可以非常方便地为“除了第一个子元素之外”的所有元素设置样式。这种写法在处理列表、卡片组、导航项等布局时特别实用，比如统一调整非首个元素的边距或颜色。

基本语法说明

例如：

.item:not(:first-child) {
  margin-top: 10px;
  color: #666;
}

这段代码会让所有带有 .item 类但不是第一个子元素的项目拥有上边距和灰色文字颜色。

实际应用场景

• 列表项间距控制：多个内容块垂直排列时，给非首个项添加上边距，形成统一间隔，避免顶部空白。
• 导航菜单样式：让除第一个按钮外的所有按钮有不同背景或边框。
• 文章段落排版：首段不缩进，其余段落加左外边距模拟缩进效果。

示例：调整卡片组边距与颜色

假设有如下HTML结构：

立即学习“前端免费学习笔记（深入）”；

知海图Chat

知乎与面壁智能合作推出的智能对话助手

157

查看详情

<div class="card-group">
  <div class="card">卡片1</div>
  <div class="card">卡片2</div>
  <div class="card">卡片3</div>
</div>

我们希望卡片1紧贴顶部，从卡片2开始有上边距并使用浅灰色字体：

.card {
  padding: 16px;
  background: #f5f5f5;
}

.card:not(:first-child) {
  margin-top: 8px;
  color: #999;
}

结果是：第一张卡片无上边距且颜色默认，其余卡片自动获得间隔和变色效果，整体更整洁。

注意事项

• 确保目标元素确实是兄弟关系，:first-child 是基于父容器内的直接子元素判断的。
• 若第一个子元素不是预期的类型（比如前面有个注释或文本节点），可能影响匹配结果。
• 可与其他伪类组合使用，如 :not(:first-child):hover 实现悬停效果差异化。

基本上就这些。合理使用 :not(:first-child) 能简化CSS逻辑，减少额外类名的添加，让样式更简洁易维护。

以上就是如何在CSS中使用伪类:not(:first-child)实现除首元素外样式_结合:not调整边距和颜色的详细内容，更多请关注php中文网其它相关文章！