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框架自动生成的，我们无法控制它放置在其他位置。

- Billa

Answer 1

+ 表示该元素紧随复选框之后。

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

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

http://jsfiddle.net/TkamX/

注意：我已经添加了一个新的

元素并将其用作父元素。

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

您也可以通过给您的元素分配一个ID，然后基于此来选择单个元素。

- Darren

---

@Adrift - 是的，这就是为什么我在我的示例中将其放置为div的原因。我本来要说，在输入框内部放置span是不好的做法等等。您还可以使用其他选择器或ID。 - Darren

Answer 2

你可以使用一般兄弟结合器~，如果你想为不必然紧接在另一个元素之后的兄弟元素设置样式。

所以在你的情况下。

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

在两种情况下都可以工作

http://jsfiddle.net/Hx8ZG/

- Adrift

Answer 3

如果唯一可能的问题是复选框和span之间存在一个隐藏的输入字段，那么您应该能够在选择器中引用它：

input[type="checkbox"] + input[type="hidden"] + .lbl:before {
    ....
}

或者，如果隐藏字段可能存在也可能不存在，那么您需要考虑两种选项：

input[type="checkbox"] + .lbl:before, input[type="checkbox"] + input[type="hidden"] + .lbl:before {
    ....
}

如果两个元素之间可能有更多的元素，而你不知道这些元素是什么，那么你需要将你的+选择器替换为~选择器，它选择任何兄弟元素而不是相邻的元素。

input[type="checkbox"] ~ .lbl:before {
    ....
}

这个选项可能是最简单的，但需要注意的是它可能会选择那些原来没有被你的 + 选择器选中的内容。

希望这有所帮助。

- Spudley