:not(:last-child)不生效主因是dom结构干扰，如注释、空白文本节点或非目标元素导致:last-child无法匹配预期元素；应清理结构或改用:nth-last-child(n+2)等更鲁棒方案。
为什么 :not(:last-child) 有时不生效
直接写 :not(:last-child) 看似合理，但容易忽略它的作用对象必须是「同级子元素中能被 :last-child 匹配到的元素」。如果父容器里混有文本节点、注释节点，或者最后一个子元素是 <div> 但前面还有 <code><span></span>，:last-child 就可能匹配不到预期元素——因为 :last-child 是按 DOM 树顺序严格匹配最后一个子节点，不区分类型。
常见错误现象：ul li:not(:last-child) { margin-right: 10px; } 在最后一个 <li> 后面加了空格或换行，实际生成了文本节点，导致该 <li> 不再是 :last-child，结果所有 <li> 都被选中。
- 确保父元素内只有目标标签（如纯
<li>或纯<div>），避免隐藏的文本节点干扰 <li>用浏览器开发者工具的「Elements」面板检查真实 DOM 结构，右键「Hide element」可临时排除干扰节点验证</li> <li>若无法控制 HTML 输出（如 CMS 渲染），优先改用 <code>:nth-last-child(n+2)替代，它更稳定
:not(:last-child) 的正确写法和适用场景
它真正适合的是结构干净、语义明确的列表或组件容器，比如导航菜单、按钮组、卡片列表。关键在于：目标元素必须是父元素的「最后一个子元素的同类兄弟」，且你只想排除那个唯一末尾项。
典型用例：给除最后一项外的所有按钮加右边距
button:not(:last-child) {
margin-right: 8px;
}
- 仅当所有
<button></button>是连续的、中间无其他标签或空白时才可靠 - 不能用于「排除最后一个
<p></p>」却允许中间夹着<img>的场景——此时:last-child可能匹配到<img>，:not(:last-child)对<p></p>全部失效 - 若需跨类型排除（如“最后一个块级元素”），CSS 无原生方案，得靠 JS 或预处理器辅助
比 :not(:last-child) 更鲁棒的替代方案
当结构不可控或需要兼容老浏览器（IE 不支持 :not() 伪类嵌套），:nth-last-child() 是更安全的选择。它不依赖“是否为最后一个”，而是基于位置计数。
例如，选中倒数第二个及之前的全部 <li>：
li:nth-last-child(n+2) {
border-right: 1px solid #ccc;
}
-
n+2表示从倒数第 2 个开始往前所有项，天然避开最后一个 - 不受中间插入其他标签影响，只要目标元素是
<li>就参与计数 - 兼容性更好：Chrome 9+、Firefox 3.5+、Safari 3.2+，比
:not(:last-child)多覆盖 IE9+ - 注意：它只对同类型元素计数，
div:nth-last-child(n+2)不会把<p></p>当作序列一部分
容易被忽略的边界情况
很多人以为 :not(:last-child) 能“智能识别逻辑末尾”，但它完全不理解语义。比如一个 <ul></ul> 里有 5 个 <li>，第 4 个被设为 display: none，第 5 个仍是 :last-child，所以 :not(:last-child) 仍会命中前 3 个——即使视觉上第 5 个成了“最后一个可见项”。
- CSS 伪类永远基于 DOM 结构，而非渲染后状态
- 响应式断行（如 flex wrap）不会改变
:last-child的匹配结果 - 动态插入/删除元素时，样式会自动重算，但 JS 手动切换
display不会触发:last-child重新判定
