影响样式的输入和标签元素的HTML顺序

我有一个复选框和标签列表。我使用这个CSS的样式应用到标签时checbox检查：影响样式的输入和标签元素的HTML顺序

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>

它的工作原理像预期一样：点击e标记添加或删除绿色风格。但是，当我在之前输入标签时，单击该标签会导致后面的标签具有应用/删除的样式。即：点击e标记添加或删除从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。但很高兴知道发生了什么。

来源

2017-07-01 Gregory Tippett

我想其他人已经解释如何相邻兄弟选择的作品。如果你想使用它并反转输入/标签的显示，你可以使用'flex'https://codepen.io/mcoker/pen/YQaxJz。你说你不关心订单，所以我想知道你是否愿意把它当成解决方案。 –

如果你只是想理解''''选择器，这个问题是重复的https://stackoverflow.com/questions/1139763/what-does-the-plus-sign-css-selector-mean –

-1

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

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

来源

2017-07-01 22:51:02 Vivick

-1

+是兄弟选择器。它专门选择用于A + B，的顺序，即，其选择时，它如下元件A.

在形式上，这是类似于后代选择，例如，div p，它选择一个div内的任何p元件B，和直接后代选择器，例如div > p，它只有在div的直接子代（而不是孙子）时才选择p。