:not() 不支持复合伪类如 :nth-child()，因其仅接受简单选择器；错误写法 li:not(:nth-child(2n)) 会被浏览器忽略，应改用 li:nth-child(2n+1) 等正向选择策略。
用 :not() 和 :nth-child() 组合时，选择器不生效？
根本原因不是语法写错了，而是 CSS 选择器的优先级和匹配逻辑被误解了。:not() 只能接收简单选择器（比如 .cls、[attr]、div），而 :nth-child(2n) 是伪类，属于“复合伪类”，不能直接塞进 :not() 里——浏览器会直接忽略整个选择器。
常见错误写法：li:not(:nth-child(2n)) → 这在所有主流浏览器中都无效，控制台可能不报错，但样式就是不应用。
- 正确思路是：先选中目标元素（比如所有
li），再用:not()排除掉你**明确能单独写出的选择器** - 如果要排除偶数位置的
li，得先把偶数位写成可独立识别的形式，比如加个 class：li:not(.even)，或者用 JS 预处理打标 - 纯 CSS 下更可行的替代是：用
:nth-child(2n+1)直接选奇数项，而不是“排除偶数项”
想跳过前3个元素后对剩余项做样式，:not() + :nth-child() 能否实现？
不能靠 :not(:nth-child(-n+3)) 这种写法——它语法合法，但语义不对：:nth-child(-n+3) 匹配的是第1、2、3个子元素，:not() 确实能排除它们，但前提是这些子元素类型一致（比如都是 li）。一旦父容器里混有其他标签（如 div、p），:nth-child() 的计数仍按所有子元素算，而 li:nth-child(-n+3) 可能根本没匹配到任何 li，导致 :not() 失去作用对象。
- 安全做法是改用
li:nth-child(n+4)：它不依赖排除，而是正向定位“从第4个子元素开始，且是li的那些” - 注意：
li:nth-child(n+4)≠ “第4个及之后的li”，而是“父元素中第4个及之后的位置上，恰好是li的那些”——中间如果有非li元素，会跳过 - 真要按“第4个
li开始”，只能用 JS 或预处理器生成 class
:not() 套多个条件时，为什么加括号反而失效？
CSS 中 :not() 不支持逗号分隔或嵌套括号。写成 :not(.a, .b) 或 :not((.a):nth-child(2)) 都是非法语法，整条规则会被浏览器丢弃。
立即学习“前端免费学习笔记（深入）”；
- 合法写法只有单个简单选择器：
:not(.a)、:not([data-id])、:not(button) - 想排除多个 class，必须链式写：
li:not(.disabled):not(.hidden) - 想排除某类元素的特定位置，例如“不是第一个且不是最后一个的
button”，得拆成：button:not(:first-child):not(:last-child) - 注意顺序无关，但每个
:not()必须独立、合法，多一个空格或括号都会让整条失效
实际项目中，什么场景下该放弃 :not() + :nth-child() 组合？
当结构动态、兄弟元素类型不可控，或需要基于“元素在同类型中的序号”（而非所有子元素中的序号）时，CSS 原生组合基本不可靠。
- 典型翻车场景：Vue/React 渲染列表，key 导致真实 DOM 节点复用，
:nth-child()计数与预期错位 - 服务端渲染 + 客户端水合后，注释节点、空文本节点影响
:nth-child()计数（尤其 SSR 框架） - 需要兼容 IE11？
:not()在 IE 中只支持单个简单选择器，且不支持伪类参数，:not(:nth-child(2))直接不认 - 此时更稳的方案是：组件层加 class（如
item--nth-odd），或用 JS 动态 setAttribute 控制
复杂逻辑交给 JS，CSS 只管确定性样式——这点容易被忽略，但省下的调试时间远超多写几行 JS。
