影响样式的 Input 和 Label 元素的 HTML 顺序

Question

我有一个复选框和标签列表。选中复选框时，我正在使用此 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。但很高兴知道发生了什么。

Answer 1

这与 a+b 选择器选择直接放在 a 之后的 b 有关。

因此(当标签放在输入之前时)紧跟在 C input 之后的 label 是 D label。