相邻的兄弟选择器在 Mozilla Firefox 39.0.3 中不起作用

Question

我有这个代码： HTML:

<label>
    <input class="checkable" type="checkbox"  value="6" name="Peak">
    <button class="button">1</button>
</label>
<label>
    <input class="checkable" type="checkbox" value="12" name="Peak">
    <button class="button">2</button>
</label>

CSS:

label > .checkable{
    display:none;
}
label > .checkable + button{ 
    cursor:pointer;
    margin:1px;
    border-radius: 16px;
    border:transparent;
    width:32px;
    height:32px;background: rgba(0,0,0,0);

}
label > .checkable:checked + button{ 
    background-color:#690b0c;
    color:white;
    border-radius: 16px;
}

我正在将复选框与元素组合在一起。当您单击其中一个按钮时，它们应该会变成红色的圆形背景。这在 IE 11 中按预期工作，但在最新版本的 Firefox 中似乎存在一些问题。有人对此有解决方法吗？

Fiddle: https://jsfiddle.net/jjqg5apa/

Answer 1

藤泽彻的回复如下：

这不是规范问题，也不是 Firefox 的错误。

我相信 Firefox 38+ 的行为符合规范所说的。

https://html.spec.whatwg.org/multipage/forms.html#the-label-element:the-label-element-10

The activation behaviour of a label element for events targeted at interactive content descendants of a label element, and any descendants of those interactive content descendants, must be to do nothing.

https://html.spec.whatwg.org/multipage/dom.html#interactive-content-2

Interactive content is content that is specifically intended for user interaction. a, audio (if the controls attribute is present), button, ...

当你点击标签内的按钮时，标签的激活行为必须是"to do nothing"因为按钮是一个交互内容，这意味着我们应该认为用户想要激活按钮，而不是封闭标签，因此不会通过单击按钮更改复选框的状态。

我认为您可以使用非交互式内容代替按钮（不确定它是否适合 a11y tho），或者只是取消隐藏复选框并使用它代替按钮。

查看完整的错误报告：bugzilla.mozilla.org/show_bug.cgi?id=1197770

相邻的兄弟选择器在 Mozilla Firefox 39.0.3 中不起作用

Adjacent sibling selectors not working in Mozilla Firefox 39.0.3

html

css

firefox

mozilla

selector