CSS伪类:first-child last-child与not结合应用_元素排除与选择优化

使用:not()结合:first-child和:last-child可精准控制样式，如li:not(:first-child)为非首项添加上边距，.nav-item:not(:last-child)为非末项添加分隔线，li:not(:first-child):not(:last-child)仅对中间项设置样式，提升布局灵活性且减少类名依赖，适用于列表与导航，但需注意IE8以下不支持:not()及结构变化对选择的影响。

在CSS中，:first-child、:last-child 和 :not() 是非常实用的伪类选择器。将它们结合使用，可以精准控制元素的样式，尤其适用于列表、导航菜单或布局组件中对首项或末项进行特殊处理的同时排除某些特定情况。

选择非首个子元素

有时我们希望为除第一个子元素外的所有元素设置样式，比如在一组按钮或列表项之间添加上边距，但第一个不需要。

这条规则会选中所有不是其父容器第一个子元素的 li，从而避免在首个元素上方添加多余间距。

选择非末尾子元素以优化分隔线

在水平导航栏中，常需要在项目之间添加右边框或分隔符，但最后一个项目不应有。

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

这样，只有非最后一个项目才会显示分隔线，视觉更整洁，无需额外HTML类或JavaScript控制。

BeatBot

Splash的AI音乐生成器，AI歌曲制作人！

165

查看详情

组合使用实现复杂选择逻辑

当需要排除首项和末项时，可嵌套使用 :not() 与多个伪类：

上述样式仅应用于既不是第一个也不是最后一个的列表项，适合中间项需要不同内边距或颜色的场景。

注意事项与兼容性

:first-child 和 :last-child 依赖于元素在父容器中的实际位置，若结构变化（如插入其他标签），可能影响匹配结果。建议配合语义化标签使用，确保结构稳定。

:not() 在现代浏览器中支持良好，但在IE8及以下不被支持。如需兼容老版本IE，应使用额外类名替代。

基本上就这些，合理利用这些伪类组合，能有效减少冗余类名，提升CSS可维护性。

以上就是CSS伪类:first-child last-child与not结合应用_元素排除与选择优化的详细内容，更多请关注php中文网其它相关文章！