直接写 li:not(:first-child) 加边框会失效，根本原因是逻辑错误：它让非首项主动画上边框，导致首项孤立且易受dom干扰；正确做法是先全局设边框再用 li:first-child 清除。
为什么直接写 li:not(:first-child) 加边框会失效？
很多人以为给非首项加边框只要写 li:not(:first-child) { border-top: 1px solid #eee; } 就行，结果发现所有项都有边框——根本原因不是语法错，而是逻辑反了：:not(:first-child) 匹配的是“非第一个”，但你真正想控制的是“从第二个开始的每一项都加**上边框**”，而首项本身没上边框，其余项却要靠自己画出和前一项的分隔线。这会导致视觉上首项“被孤立”，但代码语义其实是“其余项主动画线”。更关键的是，如果父容器有默认 padding 或 border，或存在隐藏文本节点，:first-child 可能根本没匹配到目标 li。
li:not(:first-child) 的实际适用场景是什么？
它真正适合的是“对非首项统一施加某种**非分隔类样式**”，比如：
-
li:not(:first-child) { margin-top: 12px; }—— 给第二项起加顶部间距，避免首项与上方内容贴太近 -
li:not(:first-child) { opacity: 0.9; }—— 首项高亮，其余稍弱化 -
li:not(:first-child) { color: #666; }—— 首项用主色，其余用次色
这些操作不依赖相邻元素关系，只作用于单个元素自身状态，所以稳定可靠。一旦涉及边框、阴影等需要“模拟分隔”的效果，就得换思路。
去除首项上边框的正确写法是 li:first-child 而非 :not()
要让首项“没上边框”，最直白、最不易出错的方式是：先给所有 li 加上边框，再单独清除首项的。例如：
li {
border-top: 1px solid #eee;
}
li:first-child {
border-top: none;
}
这种写法的优势：
- 不依赖 DOM 中是否存在空格/注释节点 ——
:first-child在这里只是“清除”，即使它没命中，最多是多一条线，不会崩样式 - 兼容性极好，IE9+ 全支持
- 开发者工具里一眼能看出哪条规则覆盖了哪条，调试成本低
- 比
:not()更易配合 BEM 或 utility class 使用（比如.list-item--no-top-border）
什么时候才该用 :not(:first-child) 控制边框？
仅当你要“**跳过首项，从第二项起为每一项画下边框**”时才合理，例如实现“每项下方有分割线，但最后一项不要”：
li:not(:first-child):not(:last-child) {
border-bottom: 1px solid #eee;
}
但注意：这其实是在同时排除两个端点，已经偏离了原始需求。更常见且健壮的做法仍是：
li {
border-bottom: 1px solid #eee;
}
li:last-child {
border-bottom: none;
}
真正容易被忽略的点是：伪类选择器的匹配对象必须是**同级、无干扰节点、类型一致**的元素。哪怕 DOM 里多了一个看不见的 零宽空格，:first-child 就可能指向它而不是你的 li。动手前务必用开发者工具的 Elements 面板确认 :first-child 确实标亮了你要操作的那个元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
