MVC 表单中“下一个但一个”元素、复选框和标签的 CSS 选择器

Question

我正在使用this 参考来创建一些样式复选框。是指使用+选择器获取复选框后面的标签：

input[type="checkbox"]{}
input[type="checkbox"] + label {}

当html 为：

<input type="checkbox" />
<label>Label</label>

但是，我使用的是 MVC 和 Razor。当我使用以下助手时：

@Html.CheckBox(...)
@Html.Label(...)

产生以下html（详见this SO question）：

<input type="checkbox" />
<input type="hidden" />
<label></label>

在复选框和输入之间产生了一个额外的隐藏输入。这可以防止CSS 中的+ 选择器找到label，因为它不再是checkbox 的下一个元素。在这种情况下如何选择label？

Answer 1

这样使用：

input[type="checkbox"] + input[type="hidden"] + label {}

或者，如果您想定位复选框之后的任何元素，那么您可以使用以下内容：

input[type="checkbox"] + * + label {}