Firefox中:has()未生效需启用对应配置：1. Firefox 103–120需设layout.css.has-selector.enabled为true；2. 121+默认启用但需确认版本及标志状态；3. userContent.css中使用需开启toolkit.legacyUserProfileCustomizations.stylesheets；4. 验证时用最小HTML测试并避免不支持的选择器。
如果您在 Firefox 中使用 :has() 伪类时样式未生效，或 DevTools 中完全不识别该语法，则很可能是实验性支持尚未启用。Firefox 对 :has() 的支持依赖于特定配置标志，且不同版本启用方式存在差异。以下是启用该功能的多种可行方法：
一、启用 layout.css.has-selector.enabled 标志（适用于 Firefox 103–120）
该标志是早期版本中控制 :has() 解析能力的核心开关，需手动设为 true 才能激活基础支持。
1、在地址栏输入 about:config 并回车，确认风险提示后进入高级设置页面。
2、在搜索框中输入 layout.css.has-selector.enabled。
立即学习“前端免费学习笔记（深入）”；
3、若该条目存在且值为 false，双击将其切换为 true；若不存在，说明当前版本已默认启用或不再需要此标志。
4、无需重启浏览器，刷新当前测试页面即可立即验证 :has() 规则是否被解析。
二、确保使用 Firefox 121+ 稳定版并检查默认状态
自 Firefox 121 起，:has() 已作为标准特性默认启用，但部分构建（如 ESR 或定制版）可能仍保留禁用策略，需主动确认。
1、点击右上角菜单 → 帮助 → 关于 Firefox，确认版本号 ≥ 121。
2、访问 about:config，搜索 layout.css.has-selector.enabled。
3、若该值显示为 true 且状态列为“已修改”，说明已被用户或策略覆盖；若为“默认”且值为 true，则功能已就绪。
将一个或多个 UI 原型图、线框图、产品截图或设计稿转换为标准化、可直接交付的 PRD 风格文档，供产品、设计、前端和测试共同使用。适用于 Codex 需要分析 PC 网页、桌面端、移动端、响应式页面、独立弹窗、表单、表格、看板、数据大屏或多页面流程截图，还原页面结构与交互，强制套用固定文档模板，抽取跨页面共享规则，或把一组原型沉淀为单页规范文档加整体业务流程文档的场景。不适用于纯视觉审美点评、代码实现、接口设计、埋点方案、竞品分析或无 UI 输入的业务需求创作。
4、打开开发者工具（F12），在 Elements 面板中选中含 :has() 的 CSS 规则，观察 Styles 侧边栏是否显示该规则——若完全不出现，表明解析失败，需回退至方法一排查。
三、启用 toolkit.legacyUserProfileCustomizations.stylesheets（用于 userContent.css 中的 :has()）
当您在 userContent.css 中编写 :has() 规则（例如注入网页的跨域样式），需额外开启用户样式表支持，否则所有自定义 CSS（含 :has()）均被忽略。
1、在 about:config 中搜索 toolkit.legacyUserProfileCustomizations.stylesheets。
2、将该布尔值设为 true。
3、确认您的配置文件目录下存在 chrome/userContent.css 文件，且其中包含合法的 :has() 规则（如 body:has(.error) { background: #fee; }）。
4、保存文件后，在当前标签页按 Ctrl+Shift+R（强制重载）以绕过缓存，触发新样式加载。
四、验证 :has() 实际可用性与常见静默失效场景
即使标志启用，:has() 仍可能因语法限制或 DOM 状态不匹配而静默失效，需通过最小化测试用例快速定位问题根源。
1、新建空白 HTML 文件，仅包含：<div class="parent"><span class="child">test</span></div> 及样式 .parent:has(.child) { border: 2px solid green; }。
2、在 Firefox 中打开该文件，检查 .parent 是否渲染绿色边框；若无反应，说明底层支持异常或标志未生效。
3、避免在 :has() 内使用不被支持的选择器，例如 :hover、:focus、::before 或嵌套 :has()；仅允许 :checked、:valid、[data-status] 等静态可判定状态。
4、检查目标父元素是否被更高权重规则（如 !important）覆盖，导致 :has() 样式无法体现。
