Question

我知道可以使用以下CSS控制单个类的显示：

/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX.sdk

我知道该代码控制“ some-random-class”类的任何对象的显示，该类是选中任何复选框的同级对象。如果我有3个要控制其显示的类，则可以使用3个单独的输入“功能”分别针对每个类进行控制。我似乎不太清楚的是如何使用相同的“函数”控制多个类，以及如何控制与以下HTML不在同一代中的类：

.some-random-class{
    display: none;
}

input[type=checkbox]:checked ~ .some-random-class{
    display: flex;
}

当我尝试使用我认为在逻辑上应该起作用的方式来控制所有这三个时，会破坏整个事情。

以下CSS是我认为应该起作用的，但是不起作用：

<div>
    <input type="checkbox">
    <div class="first-class">
        stuff to hide
    </div>
    <div class="second-class">
        stuff to hide
        <input type="checkbox">
        <div class="third-class">
            stuff to hide
        </div>
    </div>
</div>

这是否有可能，还是我问太多CSS？如果我想完成的事情是可能的，那么我对上述功能不了解什么？

Answer 1

您需要用,分隔每个规则，而不仅仅是用~串联它们，因为这只能选择一个元素。

input[type=checkbox]:checked ~ .first-class,
input[type=checkbox]:checked ~ .second-class,
input[type=checkbox]:checked ~ .third-class {
    color: red;
}

input[type=checkbox]:checked ~ .third-class {
    color: blue;
}

<div>
    <input type="checkbox">
    <div class="first-class">
        stuff to hide
    </div>
    <div class="second-class">
        stuff to hide
        <input type="checkbox">
        <div class="third-class">
            stuff to hide
        </div>
    </div>
</div>

在单独的Div内选择元素的多个常规同级

1 个答案: