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。

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

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

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

我想找到 .container（分支中的第一个）下方的第一个 .grid 元素。如果有多个分支，我想 select 所有分支。 .grid 元素前面永远不会有 .row - 有什么建议吗？

Answer 1

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

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

根据需要添加深度。

Answer 2

你是这个意思吗？

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

Answer 3

由于 .grid 可能出现在它和它的容器或其祖先 .row 之间的任何位置，您将无法仅使用一个选择器来完成此操作。使用 > 组合器需要提前知道 .grid 的每个级别的确切嵌套位置，并假设它不会改变，并且 :not() 不允许组合器，所以你不能做像 .container .grid:not(.row .grid)（除非你use jQuery）。

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

.container .grid {
    /* Styles */
}

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

CSS - 找到第一个后代

CSS - Find the first descendant

css-selectors