css - 我如何在 CSS 中将加号选择器与父类和类结合起来？

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;
}

当然可以，但我想知道如何将加号选择器与其他类型的选择器和类结合使用。是否可以？你能用括号对选择器进行分组吗？例如:

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

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

我主要从事后端工程，因此前端不是我的强项。感谢您提供任何提示或指南，以及我没有找到/或简短答案的规范链接。 :)

Answer 1

仅当您试图覆盖另一条规则时，在 CSS 中做到具体才重要。通常最好只使用像类这样简单的东西。

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

<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>