最常用方式是 :nth-child(-n+3)，但受父容器所有同级元素影响；更稳妥的是 :nth-of-type(-n+3)，仅对 li 单独编号，兼容不干净 dom；javascript 可作为 ie8 等老环境补位方案。
用 :nth-child() 选中前3个 li 元素
最常用也最直接的方式是 :nth-child(-n+3)，它匹配位置 ≤3 的所有子元素。注意：这个选择器基于父容器内所有同级元素的顺序，不是只看 li 的序号。
常见错误是写成 :nth-child(1,2,3) —— 这语法根本不存在，浏览器会直接忽略整条规则。
- 如果列表结构干净（
ul下只有li），ul li:nth-child(-n+3)安全可用 - 如果
ul里混有注释、文本节点或其它标签（比如div），:nth-child()会把它们一起计数，导致实际第1个li可能是:nth-child(2) - 想严格按
li自身顺序选前3个，得换思路（见下一条）
用 :nth-of-type() 更稳妥地选前3个 li
:nth-of-type() 只对同类型标签（这里是 li）单独编号，不受中间其他元素干扰。适合真实项目中常有的“不干净 DOM”场景。
示例：
ul li:nth-of-type(-n+3) {
background: #e0f7fa;
}
- 它忽略
ul中的div、注释、空格文本等，只给li编号 1/2/3… - 但要注意：如果
li前面还有别的li（比如上一个ul里的），:nth-of-type()不跨父级，所以不影响 - 兼容性没问题，IE9+ 都支持
用 :first-child + :nth-child() 组合写法（少用）
有人会拆成 :first-child、:nth-child(2)、:nth-child(3) 并列写，例如：
li:first-child,
li:nth-child(2),
li:nth-child(3) {
font-weight: bold;
}
- 逻辑清晰，但冗长，维护成本高；加个第4个要改三处
- 依然受“非
li元素占位”影响，和纯:nth-child()一样脆弱 - CSS 文件体积增大，对大量列表项无扩展性
JavaScript 备选：当 CSS 不够用时
如果需要动态控制、或兼容 IE8 及更老环境，CSS 本身做不到，就得靠 JS。但注意：这不是“替代 CSS”，而是“补位”。
- 用
document.querySelectorAll('li')拿到全部li，再取前3个：Array.from(nodes).slice(0, 3) - 别用
getElementsByTagName后直接[0]~[2]，因为返回的是HTMLCollection，不是数组，slice会报错 - 如果列表异步加载（比如 Vue/React 渲染后），JS 代码得放在数据就绪之后执行，否则可能选不到元素
:nth-of-type(-n+3) 是平衡兼容性、可读性和鲁棒性的首选。真正容易被忽略的是 DOM 结构是否“纯净”——看似简单的选择器，一碰到服务端渲染插入的注释或前端框架加的 wrapper，:nth-child() 就会悄悄失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
