li:not(:last-child) 不生效的根本原因是 DOM 结构干扰，如末尾存在空格、注释或非 li 元素，导致 :last-child 匹配失败；应改用 li:not(:last-of-type) 或 li + li，或采用 gap 布局替代。
直接用 li:not(:last-child) 加 margin-right 是最稳妥的解法，但必须确认父容器是纯 li 兄弟结构，否则 :last-child 会匹配错元素。
为什么 li:not(:last-child) { margin-right: 12px; } 有时不生效？
根本原因不是语法错，而是 DOM 结构干扰：:last-child 匹配的是“同级中最后一个子节点”，如果 ul 末尾有空格文本节点、注释、或被 div 包裹，:last-child 就可能指向那个非 li 元素，导致所有 li 都被选中（因为它们全都不等于那个 div 或文本节点）。
- 用浏览器开发者工具右键检查
ul，看 computed 样式里:last-child状态是否真落在最后一个li上 - 若父容器内混有其他类型节点，改用
li:not(:last-of-type)—— 它只认元素类型，无视文本/注释 - 服务端模板或 SSR 渲染时容易插入不可见空白，建议在构建阶段压缩 HTML 或用
display: contents剥离包裹容器
:not() 嵌套多个条件时逻辑是 AND 还是 OR？
p:not(.footer):not([data-no-margin]):not(:last-of-type) 表示“同时不满足这三个条件”的元素才会被选中——这是 AND 逻辑。也就是说，只要该 p 带了 .footer 类，或有 data-no-margin 属性，或本身就是 last-of-type，它就会被排除。
- 想表达“只要满足任一条件就跳过”，写法没错，但要注意权重：每个
:not()都会增加选择器特异性 - 现代浏览器（Chrome 105+、Firefox 102+、Safari 16.4+）支持逗号分隔写法：
p:not(.footer, [data-no-margin], :last-of-type)，语义更紧凑，兼容性需查 CanIUse - IE 完全不支持多参数
:not()，仍需拆成多个:not()
Flex/Grid 布局下 :not(:last-child) 为何失效？
:last-child 永远按 DOM 顺序判断，和视觉位置无关。Flex 中用了 order、Grid 中用了 grid-row 打乱顺序后，:last-child 仍指向 HTML 里写在最后的那个元素。
- Flex 场景优先用
gap替代margin-right：.container { display: flex; gap: 12px; }，彻底绕过伪类匹配问题 - 必须用
margin时，改用相邻兄弟选择器：li + li { margin-left: 12px; }—— 它天然跳过第一个，且不受order影响 - Grid 若需每行最后一项无
margin-right，得结合列数计算：li:not(:nth-child(4n)) { margin-right: 12px; }（假设 4 列）
真正容易被忽略的点是：伪类匹配发生在样式计算阶段，而 DOM 节点类型、顺序、甚至是否被 display: none 隐藏，都会影响 :last-child 的结果。别只盯着 CSS 写法，先看清结构树。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
