html - CSS 选择器和 HTML

Question

下面是我的 CSS 和 HTML 代码。

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

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框架自动生成的，我们没有控件可以将其放置在其他地方

score 3 · Accepted Answer

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

您可以将其更改为>表示父母的。

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

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

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

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

score 1 · Accepted Answer

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

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 {
    ....
}

此选项可能是最简单的，但需要注意的是它可能会选择原始+选择器未选择的内容。

希望有帮助。

score 1 · Accepted Answer

如果您尝试设置不一定紧跟在另一个元素之后的同级，则可以使用通用同级组合器。 ~

所以在你的情况下

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

将在这两种情况下工作

3 回答 3