Question

我想选择这三个.box兄弟姐妹中的每一个的第一级.box，而不是他们的孩子.box（s）。（这有意义吗？）

这是我的标记：

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

当然，内盒仍会显示父母的蓝色背景，但你明白了。

Answer 2

选择第一个选择的更好方法是在css选择器中使用>，因此请使用它：

body>.box {
    css here
}

CSS多级父选择器

2 个答案: