如何改写JS中的伪类选择器使其在火狐浏览器中生效？

你遇到的问题是Firefox对:has()伪类结合相邻兄弟选择器的语法存在兼容性问题（旧版Firefox未支持:has()，部分版本对该组合解析报错），以下是两种单脚本兼容方案：

方案1：直接用JS逻辑实现等价选择 #

无需依赖:has()，通过反向选择再筛选的方式达成相同效果，兼容所有现代浏览器：

const targetHeaders = Array.from(document.querySelectorAll('div.content'))
  .map(contentEl => contentEl.previousElementSibling)
  .filter(el => el && el.tagName === 'HEADER');

逻辑说明：先选中所有div.content元素，再取它们的前一个兄弟节点，最后筛选出标签为HEADER的元素，完全等价于header:has(+ div.content)的匹配结果。

方案2：特性检测+分支处理 #

优先使用原生选择器（保留Chromium浏览器的性能优势），不支持时自动降级到JS逻辑：

let targetHeaders;
try {
  // 尝试使用原生:has选择器
  targetHeaders = document.querySelectorAll('header:has(+ div.content)');
} catch (error) {
  // 不支持时执行兼容逻辑
  targetHeaders = Array.from(document.querySelectorAll('div.content'))
    .map(contentEl => contentEl.previousElementSibling)
    .filter(el => el?.tagName === 'HEADER');
}

如果目标用户均使用Firefox 121及以上版本，也可直接提示升级浏览器——Firefox从121版本开始正式支持:has()伪类，升级后原选择器即可正常运行。

内容的提问来源于stack exchange，提问作者jjcb