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中的元素兄弟，这些兄弟是在当前时间之前声明并获得第一个匹配）并且实际上您指定了{{1}在一个有趣但不是你期望的复选框上。 CSS没有之前的选择器（换句话说，没有选择器来扫描HTML中的元素的兄弟姐妹，这些兄弟姐妹在当前的那个之前被声明），所以你问的东西实际上是不可能的。

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

复选框
标签

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

1 个答案: