特定:has选择器在Firefox无效，Chrome与Edge可正常运行的问题排查

我使用Kendo（基于.NET V4）生成了一个表单，表单的标签内嵌套有多个div。希望根据表单中下拉框的选择，动态隐藏部分输入字段和标签。目前编写了toggleItemDisplayForDepositChgType函数用于切换元素显示状态，函数代码如下：

function toggleItemDisplayForDepositChgType(e) {
    var elements = [
        { el: 'div.editor-label:has(label[for="includeInACH"])', show: false },
        { el: 'div.editor-field:has(#includeInACH)', show: false },
        //...
    ];

    var showArHoGLOverride = false;

    if (e && e.model) {
        showArHoGLOverride = e.model.chgTypeID == @((int)(EE.ChargeType.Deposit));
    } else {
        showArHoGLOverride = $('#chgTypeID').val() == @((int)(EE.ChargeType.Deposit));
    }

    $('#arGLOverride').data("kendoComboBox").enable(showArHoGLOverride);
    $('#hoCreditGLOverride').data("kendoComboBox").enable(showArHoGLOverride);

    elements.forEach(function (item) {
        var el = document.querySelector(item.el);

        if (showArHoGLOverride === item.show) {
            el.style.display = "inline";
        } else {
            el.style.display = "none";
        }
    });
}

该选择器在Chrome、Edge和Safari中可正常识别，但在Firefox中出现错误：

Document.querySelector: 'div.editor-label:has(label[for="includeInACH"])' is not a valid selector

解决办法 #

方法1：改用jQuery的:has()选择器（推荐） #

你的代码已经引入了jQuery（从$('#chgTypeID')等调用可看出），而jQuery自身实现了:has()选择器，不依赖浏览器原生支持，兼容性覆盖所有主流浏览器，包括Firefox。

只需修改元素遍历逻辑，用jQuery替代原生document.querySelector：

elements.forEach(function (item) {
    var $el = $(item.el); // 使用jQuery选择器
    if (showArHoGLOverride === item.show) {
        $el.css('display', 'inline');
    } else {
        $el.css('display', 'none');
    }
});

方法2：避开:has()，通过子元素找父元素 #

如果不想依赖jQuery，可以调整选择器逻辑，先定位目标子元素，再通过closest()找到父级容器（Firefox完全支持closest()方法）：

1. 修改elements数组结构，改为存储子元素选择器和父容器类名：

var elements = [
    { childEl: 'label[for="includeInACH"]', parentClass: 'editor-label', show: false },
    { childEl: '#includeInACH', parentClass: 'editor-field', show: false },
    //...
];

2. 调整遍历逻辑：

elements.forEach(function (item) {
    var childEl = document.querySelector(item.childEl);
    if (!childEl) return; // 元素不存在则跳过
    var parentEl = childEl.closest('div.' + item.parentClass);
    if (showArHoGLOverride === item.show) {
        parentEl.style.display = "inline";
    } else {
        parentEl.style.display = "none";
    }
});

方法3：开启Firefox原生:has()支持（仅本地测试用） #

如果只是本地开发测试，可以手动开启Firefox对:has()的支持：

• 在Firefox地址栏输入about:config
• 找到layout.css.has-selector.enabled选项，设置为true
• 重启浏览器生效

但此方法不适合生产环境，无法要求所有用户修改浏览器设置。

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