html - MVC 表单中 'next but one' 元素、复选框和标签的 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 的下一个元素>。在这种情况下如何选择标签？

Answer 1

像这样使用:

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

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

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