CSS多级父选择器

Question

我想选择.box这三个.box兄弟姐妹中的每一个的第一级,而不是他们的孩子.box.(这有意义吗？)

这是我的标记:

<div class="box">
    <div class="box">
        test
    </div>
</div>

<div class="box">
    <div class="box">
        test2
    </div>
</div>

<div class="box">
    <div class="box">
        test3
    </div>
</div>

如何使用CSS执行此选择？

Answer 1

除非您以某种方式特别引用外框的父级,否则这是不可能的.例如,如果您知道所有这些都将在内部#foo,那么#foo > .box将完成这项工作.

但是,您可以使用.box > .box或选择另一个框中的框.box .box,因此以这种方式可以使用"撤消更改"的经典解决方法来执行您需要的操作.例如,要仅将外框变为蓝色:

.box { background: blue } /* make a far-reaching change */
.box .box { background: transparent } /* then undo it partially */

当然,内盒仍将显示其父母的蓝色背景,但你明白了.