Firefox 中 :has() 在 querySelectorAll() 中仍不支持，截至 2026 年中仅 CSS 样式表部分实验性支持，需手动开启 layout.css.has-selector.enabled；直接调用会抛 DOMException，推荐使用 polyfill-pseudoclass-has 无缝增强原生 API。
:has() 在 Firefox 中仍不可用于 querySelectorAll()，截至 2026 年中，该 API 尚未启用（仅 CSS 样式表中部分实验性支持，需手动开启 flag）。其他现代浏览器如 Chrome/Edge 111+ 已全面支持。兼容不是“要不要做”，而是“怎么做才不踩坑”。
Firefox 中 :has() 报 DOMException 错误怎么办
直接调用 document.querySelectorAll("header:has(+ div.content)") 在 Firefox 会抛出 DOMException: "header:has(+ div.content) is not a valid selector"，这不是语法错，是浏览器尚未实现该选择器的 DOM 查询能力。
- 别试图用 try/catch 包裹后降级为遍历 +
.matches()—— 性能差、逻辑易漏（比如兄弟关系需精确判断nextElementSibling是否匹配） - 优先引入
polyfill-pseudoclass-has：它只增强原生方法，不改业务代码，且已通过大量站点验证 - 引入方式要写在 DOM 加载前（
<head>或<body>开头），并确保onload回调执行window['polyfill-pseudoclass-has'].addToBrowser()
:nth-child() 和 :nth-of-type() 在 IE8 及以下完全失效
IE8 支持 :first-child 和 :last-child，但不识别 :nth-child(2n) 或 :nth-of-type(odd) —— 这类选择器在构建工具输出中若未被剔除或替换，会静默失效（无报错，样式不生效）。
- 若目标用户含 IE8，必须用 class 模拟：例如给第 2、4、6 个元素加
class="even"，再用.even选择 - 避免依赖构建工具自动处理：autoprefixer 不处理结构伪类，Sass 的
@for循环生成 class 是更可控方案 - 注意
:nth-child()和:nth-of-type()行为差异——前者按 DOM 顺序计数，后者只计同类型标签，在混合节点中结果不同，降级时需按实际结构选对应策略
::before / ::after 在 IE8–IE11 写法必须分层兼容
IE8 只认 :before，IE9–11 需 :before, ::before 并列且单冒号在前；IE7 则彻底不支持，连单冒号也无效。
- SCSS 中写
&::before编译后仍是双冒号，必须手动配outputStyle: 'compressed'或加插件（如sass-convert）强制转单冒号 - IE8 中
content值受限：不能用url()、字体图标 Unicode（如\e900）、\A换行符；安全值只有纯文本或attr(data-icon) - IE7 场景下，伪元素功能必须退化：清浮动改用
overflow: hidden，图标改用<span class="icon-check"></span>+ background-image
渐进增强不是口号，是 class 层级和 JS 检测的组合动作
真正麻烦的不是某个选择器不支持，而是“不支持时页面是否还能用”。例如 :has() 控制折叠逻辑，降级后若没 fallback，点击就完全无响应。
立即学习“前端免费学习笔记（深入）”；
- JS 检测建议用
document.createElement("div").matches(":has(*)") === false判断，比 UA 字符串可靠 - 关键交互逻辑不要全绑在伪类上：把
:has(+ .content)对应的 header 状态，同步存到data-has-content="true"属性，JS 读属性而非依赖选择器 - 伪类仅用于视觉增强（如 hover 状态、装饰线），核心布局与交互必须基于 class 或 JS 状态驱动
