Question

在div包装器中，我有一些单选按钮。当选择一个时，我希望它的标签有一定的背景颜色。我可以在CSS规则中具体具体吗？

HTML：

<div class="switch-wrapper">
    <form>
        <input id="id-1" class="my-switch-on" type="radio" />
        <label for="id-1">Yes</label>
        <input id="id-2" class="my-switch-off" type="radio" />
        <label for="id-2">No</label>
    </form>
</div>

我最接近的猜测：

div.switch-wrapper input[type="radio"].my-switch-on+label {
    background-color: #000;
}

但我无法让它发挥作用。我做的是这个：

input[type="radio"]:checked + label {
    background: #000;
}

这当然有用，但我想知道如何将加号选择器与其他类型的选择器和类组合。可能吗？你能用括号将选择器分组吗？ E.g：

div.foo form.bar + div > span {
    background-color: #000;
}

哪个选择器优先？不能做多个？

我主要做后端工程，所以前端不是我的强项。感谢任何提示或指南，链接到规格我没有找到/或简短的答案。：）

Answer 1

在您尝试覆盖其他规则时，在CSS中具体是非常重要的。通常最好只使用类似课堂的东西。

＆＃13;

.my-switch:checked + label {
  background: black;
  color: white;
}

＆＃13;

<div class="switch-wrapper">
    <form>
        <input id="id-1" class="my-switch my-switch-on" type="radio" name="onOf" checked />
        <label for="id-1">Yes</label>
        <input id="id-2" class="my-switch my-switch-off" type="radio" name="onOf" />
        <label for="id-2">No</label>
    </form>
</div>

＆＃13;

Answer 2

This SO post应该回答有关选择器关联性的具体问题。

如果您可以控制HTML并且发现自己需要非常复杂的选择器，那么可能最好稍微重新组织HTML（是的，这违背了分离语义和表示的理想，但HTML和CSS总是远远不够在这方面做得很短）

我如何在CSS中将加号选择器与父级和类组合？

2 个答案: