CSS列表前3项颜色设置技巧

本文详解了如何利用CSS的:nth-child()选择器灵活、精准地为列表（ul/ol）前几项设置不同颜色：既可通过简洁的li:nth-child(-n+3)统一设置前N项样式，也能逐项定义nth-child(1)、nth-child(2)等实现个性化配色，还可结合:not()选择器反向突出前几项、弱化后续内容；方法兼容性好、代码简洁高效，是前端开发中提升数据可视化表现力和用户体验的实用技巧。

在CSS中，如果想对列表的前几项单独设置颜色，可以使用 :nth-child 选择器来精确控制前几项的样式。这种方法适用于 ul、ol 或其他元素组成的列表结构。

1. 设置前3项为红色

如果你想让一个列表中的前3个 li 元素文字变成红色，可以这样写：

-n+3 是一种公式，表示从第1项开始到第3项都选中，适合用于“前几项”的场景。

2. 前几项不同颜色（逐项设置）

如果希望每一项颜色都不一样，可以分别定义：

这种方式适合需要个性化每项样式的场景，比如排行榜前三名不同颜色。

3. 排除前几项，设置其余项

如果你只想让“除了前3项之外”的列表项变色，可以用 :nth-child 配合 :not()：

这会将第4项及以后的文字设为灰色，常用于突出显示前几条数据。

基本上就这些常用写法。使用 :nth-child(-n+N) 是处理“前N项”最简洁的方式，兼容性好，推荐在实际项目中直接使用。注意确保HTML结构清晰，避免嵌套干扰选择器匹配。

好了，本文到此结束，带大家了解了《CSS列表前3项颜色设置技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！