Firefox 109中CSS3伪类选择器失效问题求助

核心问题排查 #

你遇到的选中后无法取消勾选、未选中状态样式不稳定的问题，主要由三个原因导致：

• background-color: none是无效CSS写法，背景透明需用transparent，无效值会引发Firefox样式解析异常
• 补充的否定状态选择器用错了类名（写了border_div_in_scrollbox而非目标类genre_element），导致未选中状态样式完全不生效
• Firefox 109对:has选择器的状态同步存在重绘bug，表单控件checked状态变化时，父元素样式无法及时更新

修正后的完整代码 #

.genre_element {
    background-color: transparent; /* 替换无效的none */
    transition: all .2s; /* 统一过渡效果，避免重复定义 */
}

div.genre_element:has(input[type="checkbox"])::before {
    content: "\002B";
    transition: transform .3s ease-in-out;
}

div.genre_element:has(input[type="checkbox"]:checked) {
    background-color: #ff9400;
}

div.genre_element:has(input[type="checkbox"]:checked)::before {
    content: "\2713";
    transform: rotate(-360deg);
}

/* 修正类名的未选中状态样式，确保覆盖逻辑正确 */
div.genre_element:has(input[type="checkbox"]:not(:checked)) {
    background-color: transparent;
}

极端情况兜底方案 #

如果上述代码仍存在样式不稳定问题，可通过手动触发重绘强制Firefox更新样式：

1. 添加JS监听checkbox状态变化：

document.querySelectorAll('.genre_element input[type="checkbox"]').forEach(checkbox => {
    checkbox.addEventListener('change', () => {
        const parent = checkbox.closest('.genre_element');
        parent.classList.add('force-redraw');
        setTimeout(() => parent.classList.remove('force-redraw'), 10);
    });
});

2. 配合CSS触发重绘：

.force-redraw {
    transform: scale(1);
}

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