Question

我有一个复选框和标签列表。我正在使用此CSS在检查checbox时将样式应用于标签：

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标签可添加或删除绿色样式。但是，当我在输入之前放置标签时，单击标签会导致跟随标签应用/删除样式。即：单击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选择器选择b之后直接放置a的事实有关。

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

Answer 2

+是兄弟选择器。它按顺序专门选择A + B，即当它跟随元素A时选择元素B.

在形式上，它类似于后代选择器，例如div p，它选择p内的任何div和直接后代选择器，例如{ {1}}，仅当div > p成为p的直接子（而不是孙子）时才选择div。

+是一个直接的兄弟姐妹，但也有一个有用的一般兄弟选择器，例如，p ~ p会在同一父母下选择p前面的p

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

影响Style的Input和Label元素的HTML顺序

2 个答案: