如何在CSS中使用伪类:not(:first-child)实现除首元素外样式_结合:not调整边距和颜色
使用 :not(:first-child) 可为非首个子元素设置样式，常用于列表、卡片、导航等布局。例如 .card:not(:first-child) { margin-top: 8px; color: #999; } 可使除第一项外的卡片自动添加间距和变色，避免顶部多余空白，提升视觉一致性。该选择器基于兄弟关系判断，需确保目标元素为同级子元素，且可与其他伪类组合使用，如悬停效果。合理运用能减少冗余类名，使CSS更简洁易维护。
在CSS中，使用 :not(:first-child) 伪类可以非常方便地为“除了第一个子元素之外”的所有元素设置样式
。这种写法在处理列表、卡片组、导航项等布局时特别实用，比如统一调整非首个元素的边距或颜色。
基本语法说明
选择器 :not(:first-child) 的含义是：选中所有不是父容器第一个子元素的元素。它结合了否定伪类 :not() 和结构伪类 :first-child。例如：
.item:not(:first-child) {
margin-top: 10px;
color: #666;
}
这段代码会让所有带有 .item 类但不是第一个子元素的项目拥有上边距和灰色文字颜色。
实际应用场景
常见用途包括避免首项顶部多出不必要的间距，或突出显示后续项。- 列表项间距控制：多个内容块垂直排列时，给非首个项添加上边距，形成统一间隔，避免顶部空白。
- 导航菜单样式：让除第一个按钮外的所有按钮有不同背景或边框。
- 文章段落排版：首段不缩进，其余段落加左外边距模拟缩进效果。
示例：调整卡片组边距与颜色
假设有如下HTML结构：
卡片1 卡片2 卡片3
我们希望卡片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逻辑，减少额外类名的添加，让样式更简洁易维护。
