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

【问题标题】：HTML order of Input and Label elements affecting Style影响样式的 Input 和 Label 元素的 HTML 顺序
【发布时间】：2017-12-05 13:37:08
【问题描述】：

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

【问题讨论】：

如果您只是想了解+ 选择器，这个问题与stackoverflow.com/questions/1139763/… 重复

标签： html css input label

【解决方案1】：

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

因此（当标签放在输入之前）C input 之后的 label 是 D label。

【讨论】：

【解决方案2】：

+ 是同级选择器。它专门为 A + B 选择，按此顺序，即它在元素 A 之后选择元素 B。

在形式上，它类似于后代选择器，例如div p，它选择div 中的任何p，以及直接后代选择器，例如div > p，它只选择p如果它是 div 的直系子代（而不是孙代）。

+ 是直接同级，但也有一个有用的通用同级选择器，例如，p ~ p 将选择同一父级下前面带有 p 的任何 p。

具体查看 MDN 文章，然后阅读相关选择器：https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

【讨论】：