CSS - 找到第一个后代

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 的后代，但不保证是第一个直接后代。

我想找到 .container 下的第一个 .grid 元素(分支中的第一个)。如果有多个分支，我想选择所有分支。 .grid 元素之前永远不会有 .row - 有什么建议吗？

Answer 1

因为 .grid 可能出现在它和它的容器或其祖先 .row 之间的任何地方，你将无法只用一个选择器来做到这一点。使用 > 组合器需要提前知道 .grid 的每一层嵌套的确切位置，并假设它不会改变，而 :not() 会不允许组合器，所以你不能做类似 .container .grid:not(.row .grid) 的事情(除非你 use jQuery )。

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

.container .grid {
    /* Styles */
}

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