ie8及以下不支持:not()、[attr^="val"]等选择器，遇未知选择器整条css规则被忽略；需分层处理，可用selectivizr模拟或改用类名兜底。
:not() 在 IE8 里直接报错，[attr^="val"] 在 IE7 及更早版本整条规则被忽略——不是渲染异常，是压根不解析。现代项目若仍需兼容 IE8 或更低版本，必须放弃“写一次、到处跑”的幻想，按浏览器能力分层处理。
哪些选择器在旧浏览器里根本无效
IE8 及以下不支持：:nth-child()、:not()（多参数如 :not(.foo, .bar)）、[attr^="val"]、[attr$="val"]、[attr*="val"]、::before（只认 :before 单冒号写法）。
IE6–7 还额外不支持：div > p（子选择器）、h1 + p（相邻兄弟）、:first-child、属性选择器全系、非链接元素的 :hover。
关键点：遇到不认识的选择器，浏览器不是部分匹配，而是整条 CSS 规则跳过——连降级机会都没有。
用 Selectivizr 补全 IE6–IE8 的选择器能力
Selectivizr 是目前唯一仍在维护、能真正模拟 :nth-child()、:first-of-type、[data-foo] 等选择器行为的 JS 库。它不改写 CSS，而是在 DOM 加载后遍历匹配，给元素动态加类名（如 .selectivizr-nth-child-2），让你靠类名兜底。
必须注意三点：
• 必须先加载 jQuery 或其他兼容 Element.matches 的 polyfill（IE8 原生不支持）；
• 引入顺序不能错：基础 JS 库 → selectivizr-min.js → CSS 文件；
• 动态插入的节点不会自动生效，得手动调用 selectivizr.refresh()。
别指望 PostCSS 把 :has() 编译成兼容写法
像 postcss-selector-matches 这类插件，对 :is()、:where() 能展开成冗长但可用的选择器组合，但对依赖 DOM 结构变化的伪类（如 :has(+ .error)）完全无解——静态构建阶段无法预知运行时 DOM 状态。
性能代价也常被低估：
• 一个 :is(.btn, .link, .nav-item) 会被展开为三条独立规则；
• 多层嵌套或复杂逻辑会指数级膨胀选择器数量；
• 最终 CSS 体积增大，影响首屏解析速度。
所以，构建时转译只适用于语法糖类特性，不适用于有运行时语义的选择器。
真正有效的兼容策略是分层决策
不要统一用 “加前缀” 或 “扔个 polyfill” 解决所有问题。实际落地要看三件事：
• 目标环境是否真有 IE8 用户（内网系统？政府老平台？）；
• 该选择器是否用于关键交互逻辑（比如禁用状态样式），还是纯视觉修饰；
• 回退成本是否可控（手写 JS 判断 + class 切换，比全量引入 Selectivizr 更轻量）。
例如，input[type="number"] 做样式隔离，IE9 以下所有 <input> 都失效——这时不如直接用 .input-number 类控制，既明确又无兼容风险。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
