html - CSS 选择器和 HTML

Question

下面是我的 CSS 和 HTML 代码。

当 INPUT 和 SPAN 标签之间有一个 hidden 字段时，不应用给定的 CSS 选择器

CSS

input[type="checkbox"] + .lbl:before {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
}

CSS 工作

<label>
<input name="SMS" type="checkbox" />
<span class="lbl"> choice 2</span>
</label>

未应用 CSS

<label>
<input name="SMS" type="checkbox" />
<input type="hidden" value="false" name="SMS">
<span class="lbl"> choice 2</span>
</label>

如何更改/添加新的 CSS 选择器更改以支持这两种情况？

注意 Hidden 字段是由ASP.Net MVC 框架自动生成的，我们无法将其放置在其他地方

Answer 1

+ 表示元素紧跟在复选框之后。

您可以将其更改为 >，表示父级。

input[type="checkbox"] > .lbl:before {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
}

http://jsfiddle.net/TkamX/

注意:我添加了一个新的 div 并将其用作父元素。

div > .lbl {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
}

您还可以通过为您的 span 提供一个 ID，然后根据它进行选择来使用单个选择器。