我有一个复选框和标签列表。选中复选框时,我正在使用此 CSS 将样式应用于标签:
input[type=checkbox]:checked + .CheckLabels {background-color: green;}
当我这样排序我的 HTML 时:
<input type="checkbox" name="C" id="checkC" value="C" checked>
<label class="CheckLabels" for="checkC">C</label>
<input type="checkbox" name="D" id="checkD" value="D" checked>
<label class="CheckLabels" for="checkD">D</label>
它按预期工作:单击 C 标签可添加或删除绿色样式。但是,当我将标签放在 输入之前时,单击该标签会导致 following 标签应用/删除样式。即:单击 C 标签会在 D 标签中添加或移除绿色(尽管正确的复选框仍处于选中状态。)
<label class="CheckLabels" for="checkC">C</label>
<input type="checkbox" name="C" id="checkC" value="C" checked>
<label class="CheckLabels" for="checkD">D</label>
<input type="checkbox" name="D" id="checkD" value="D" checked>
为什么会这样?我并不特别关注标签和复选框的顺序,因为我将使用 display:none
。但很高兴知道发生了什么。
最佳答案
这与 a+b
选择器选择直接放在 a
之后的 b
有关。
因此(当标签放在输入之前时)紧跟在 C input
之后的 label
是 D label
。
关于影响样式的 Input 和 Label 元素的 HTML 顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44866004/