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

这是不可能的，除非您以某种方式特别提到外框的父级。例如，如果您知道所有这些都将在 inside#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
}