如果选中复选框，则突出显示复选框之前的标签

Question

我在突出显示复选框之前的标签时遇到问题（案例 #1）。我使用这段代码，但由于某种原因，高亮在这里不起作用：

Case #1

HTML
<label class="mylabel">My Label</label>
<input type="checkbox" class="mycheck" />

CSS
.mylabel + .mycheck:checked {
  font-weight: bold;
}

同时，如果标签位于复选框之后（案例 #2），则标签成功突出显示：

Case #2

HTML
<input type="checkbox" class="mycheck" />
<label class="mylabel">My Label</label>


CSS
.mycheck:checked + .mylabel {
  font-weight: bold;
}

我只对一种非 javascript 方式感兴趣，该方式可以突出显示位于复选框之前的标签。案例 #1 有什么问题？

Answer 1

发生这种情况是因为 + 选择器选择了下一个元素（换句话说 + 正在扫描 HTML 中声明晚于当前元素并获得第一个匹配项的元素的兄弟姐妹），实际上您在复选框上分配 font-weight: bold; 这很有趣，但不是您所期望的。 CSS 没有 previous 选择器（换句话说，没有选择器来扫描 HTML 中声明在当前元素之前的元素的兄弟姐妹），所以你问的事情不是真的可以实现。

唯一的方法是显示复选框之前的元素，例如将 float: left 分配给标签，将 float: right 分配给复选框。但是，HTML 中元素的顺序必须如下所示：

复选框
标签

如果选中复选框，则突出显示复选框之前的标签

highlight a label which goes before a checkbox if checkbox is checked

html

css

checkbox

highlight

checked