Question

考虑以下HTML - 经典网格系统：

<div class="container">
    <div>
        <div class="grid">
            <div>
                <ul class="row">
                    <li class="grid"></li>
                </ul>
            </div>
        </div>
    </div>
</div>

部分始终以.container

开头

层次结构中的第一个.grid不在.row

之前

第二个，第三个...... .grid元素总是除以.row。

.grid始终是容器的后代，但不能保证是第一个直接后代。

.row始终是.grid的后代，但不保证是第一个直系后代。

儿童.grid始终是.row的后代，但不保证是第一个直系后裔。

我想找到.grid下面的第一个.container元素（分支中的第一个）。如果有多个分支我想要选择所有分支。 .grid元素永远不会出现.row - 任何建议吗？

Answer 1

由于.grid可能出现在它与其容器或其祖先.row之间的任何位置，因此您只能使用一个选择器才能执行此操作。使用>组合器需要事先知道每个.grid级别的嵌套位置并假设它不会改变，:not()不允许使用组合器，因此您无法执行.container .grid:not(.row .grid)之类的操作1}}（除非你use jQuery）。

相反，您需要设置所有.grid元素的样式并恢复任何嵌套元素的样式：

.container .grid {
    /* Styles */
}

.container .row .grid {
    /* Revert above styles */
}

Answer 2

.container > .grid,
.container > :not(.row) > .grid {}

:not()具有可接受的浏览器支持（IE> 8，所有其他）。

根据需要添加深度。

Answer 3

这是你的意思吗？

<style>
.container li.grid:first-child {
    background-color: yellow;
}
</style>

CSS - 找到第一个后代

3 个答案: