使用:nth-child选择器可精准设置列表前几项样式。1. li:nth-child(-n+3){color:red}将前3项设为红色；2. 分别定义li:nth-child(1)、li:nth-child(2)等可实现前三项不同颜色；3. li:not(:nth-child(-n+3)){color:#999}使第4项起变为灰色，突出前几项。该方法兼容性好，适用于ul、ol等列表结构，需注意HTML结构清晰以确保选择器准确匹配。

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

1. 设置前3项为红色

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

pre { code { li:nth-child(-n+3) { color: red; } } }

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

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

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

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

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

pre { code { li:nth-child(1) { color: red; } /* 第1项 */ li:nth-child(2) { color: blue; } /* 第2项 */ li:nth-child(3) { color: green; } /* 第3项 */ } }

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

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

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

pre { code { li:not(:nth-child(-n+3)) { color: #999; } } }

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

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