:not(:first-child)不生效是因为:first-child只认dom中第一个子节点，若前面有注释、文本节点或其它标签，目标元素就不是首个子元素，导致否定失效；推荐改用li+li或:not(:nth-child(1))。
为什么 :not(:first-child) 有时不生效？
常见现象是给 li 或 div 加了 border-top: 1px solid #ccc; 和 :not(:first-child)，但第一条依然有顶边线。根本原因是：伪类选择器匹配的是元素本身是否为父容器的首个子元素，而不是“是否在视觉上排第一”。如果父容器里混有注释、文本节点、或其它非目标标签（比如 span 插在第一个 li 前），:first-child 就不会命中那个 li，导致它也被选中。
- 确保目标元素确实是父元素下连续且同类型的子元素（例如全是
li，中间无其他标签或空白文本）
- 若结构不可控，改用
:not(:nth-child(1)) 更稳妥——它按位置计数，不依赖元素类型
- 注意浏览器兼容性：
:not() 嵌套伪类在 IE 不支持，:not(:first-child) 在 IE9+ 可用，但 :not(:nth-child(1)) 同样受限于 IE9+
正确写法：分割线加在顶部还是底部？
多数人想“每项之间一条线”，直觉加 border-top 并排除第一个。但更健壮的做法是统一加 border-bottom 并排除最后一个：
li:not(:last-child) {
border-bottom: 1px solid #eee;
}
-
:last-child 比 :first-child 更少受 DOM 结构干扰（只要最后一个确实是目标元素即可）
- 避免因父容器 padding/margin 或滚动容器导致顶部线条被裁切
- 如果列表动态增删，
:last-child 行为更可预测
遇到 Flex/Grid 布局时要特别注意什么？
Flex 容器中，:first-child 仍基于 DOM 顺序，但视觉顺序可能被 order 属性改变。此时 :not(:first-child) 依然匹配原始 HTML 顺序的第一个子元素，不是视觉上最左/最上的那个。
- 不要依赖
:first-child 实现“视觉首项”的样式逻辑
- 如需按视觉顺序控制，改用 JavaScript 动态添加 class，或用
:nth-of-type()（前提是元素类型一致且可预测）
- Grid 中同理：
grid-template-areas 或 grid-area 不影响 :first-child 的匹配结果
替代方案：用相邻兄弟选择器 + 更直观？
是的，li + li 是语义最清晰的写法：
li + li {
border-top: 1px solid #eee;
}
- 它明确表示“所有紧接在另一个
li 后面的 li”，无需否定逻辑
- 兼容性极好（IE7+），且完全避开
:not() 的嵌套限制
- 缺点是无法用于非兄弟关系的场景（比如隔一个元素），但对纯列表足够可靠
li，中间无其他标签或空白文本）:not(:nth-child(1)) 更稳妥——它按位置计数，不依赖元素类型:not() 嵌套伪类在 IE 不支持，:not(:first-child) 在 IE9+ 可用，但 :not(:nth-child(1)) 同样受限于 IE9+border-top 并排除第一个。但更健壮的做法是统一加 border-bottom 并排除最后一个：
li:not(:last-child) {
border-bottom: 1px solid #eee;
}
-
:last-child比:first-child更少受 DOM 结构干扰（只要最后一个确实是目标元素即可） - 避免因父容器 padding/margin 或滚动容器导致顶部线条被裁切
- 如果列表动态增删，
:last-child行为更可预测
遇到 Flex/Grid 布局时要特别注意什么？
Flex 容器中，:first-child 仍基于 DOM 顺序，但视觉顺序可能被 order 属性改变。此时 :not(:first-child) 依然匹配原始 HTML 顺序的第一个子元素，不是视觉上最左/最上的那个。
- 不要依赖
:first-child 实现“视觉首项”的样式逻辑
- 如需按视觉顺序控制，改用 JavaScript 动态添加 class，或用
:nth-of-type()（前提是元素类型一致且可预测）
- Grid 中同理：
grid-template-areas 或 grid-area 不影响 :first-child 的匹配结果
替代方案：用相邻兄弟选择器 + 更直观？
是的，li + li 是语义最清晰的写法：
li + li {
border-top: 1px solid #eee;
}
- 它明确表示“所有紧接在另一个
li 后面的 li”，无需否定逻辑
- 兼容性极好（IE7+），且完全避开
:not() 的嵌套限制
- 缺点是无法用于非兄弟关系的场景（比如隔一个元素），但对纯列表足够可靠
:first-child 实现“视觉首项”的样式逻辑:nth-of-type()（前提是元素类型一致且可预测）grid-template-areas 或 grid-area 不影响 :first-child 的匹配结果+ 更直观？
是的，li + li 是语义最清晰的写法：
li + li {
border-top: 1px solid #eee;
}
- 它明确表示“所有紧接在另一个
li后面的li”，无需否定逻辑 - 兼容性极好（IE7+），且完全避开
:not()的嵌套限制 - 缺点是无法用于非兄弟关系的场景（比如隔一个元素），但对纯列表足够可靠
真正容易被忽略的是：分割线颜色和背景色对比是否足够，尤其在深色主题下 #eee 可能看不见；还有移动端缩放后 1px 边框变模糊，需要用 transform: scaleY(0.5) 或 box-shadow 替代。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
