是否有针对特定网格位置元素的选择器？答案

【问题标题】：Are there selectors that target elements in certain grid positions?是否有针对特定网格位置元素的选择器？
【发布时间】：2017-10-25 00:41:06
【问题描述】：

我有一个带有一堆自动流动的网格项目的 CSS 网格。有时网格项目是一个 1 x 1 轨道，有时它们是 2 x 2 轨道，所以我从源顺序中不知道哪些项目将位于网格中的某些位置。这意味着使用:nth-child() 的样式将不可靠。

我想为某些网格列（主要是最后一列）中的项目添加样式。是否有 CSS 选择器可以让我设置这些项目的样式？

例如，在这个演示中，我将如何设置框 3、5 和 9 (codepen here) 的样式？

.grid-container {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 1em;
        grid-row-gap: 1em;
    }

    .grid-item {
        background-color: #aea;
        text-align:center;
        font-size:3em;
        min-height:3em;
        line-height: 3em;
    }

    .grid-item.double {
        grid-column-start: span 2;
        grid-row-start: span 2;
    }

<body>
<div class="grid-container">

    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
    <div class="grid-item double">5</div>
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
</div>
</body>

编辑：代码将最终保存在 CMS 中，并且将来可能会发生变化。

【问题讨论】：

也许this question 可以在某种程度上帮助你？
@kevinb。那是引导“网格”框架。 OP' 使用 CSS 原生 display: grid;
@Michael Coker：“有时网格项目是一个 1 x 1 轨道，有时它们是 2 x 2 轨道，所以我不知道从源顺序中哪些项目是确定的网格中的位置。”
Michael：因为 OP 不知道会以哪个顺序或哪个网格出现，无论是双重的还是常规的。

标签： html css css-selectors css-grid

【解决方案1】：

当使用 CSS 渲染网格时，没有用于匹配某些网格位置中的元素的选择器。 grid-structural selectors introduced in Selectors 4 仅匹配基于以文档语义表达的网格结构的元素，例如 HTML 中的表格（这也意味着当它们是使用 display: table-* 呈现的非表格元素时，它们也无法匹配基于网格语义的元素）。

flexbox 也存在类似的问题：没有选择器可以根据它们的布局方式匹配特定的 flex 项。一般来说，没有选择器根据 CSS 管理的布局匹配元素。选择器仅根据文档语义（源顺序等）匹配元素。

要设置所需元素的样式，您需要使用其他方式来识别它们，例如客户端脚本，或一些后端逻辑，这些逻辑根据元素的网格位置用类标记元素（如果网格布局在后端）。你如何做到这一点超出了这个问题的范围。

【讨论】：

这就是我害怕的。我想我们必须等待 Selectors 5 或更高版本。
可以从css 定位网格列/行。这用于将区域放置到网格中的某个特定位置。因此，我看不出没有实现伪选择器的任何原因。
@Eugen Konkov：通常，不会实现基于布局匹配元素的选择器，因为 1）定位它们并设置它们的样式，使它们停止匹配这些布局条件会产生循环依赖 2）这些选择器将在 CSS 之外毫无意义。这些是 CSSWG 给出的理由，我不代表他们。

【解决方案2】：

我最近发布了一个 NPM 包，self-aware-grid，用于帮助解决这类问题。它确定哪些元素位于哪一列和哪一行，并相应地应用 CSS 类，以便您可以根据自己的喜好设置这些元素的样式。

我没有在具有不同大小的孩子的网格上测试它，所以我希望除非出于某种偶然的意外，否则只支持相同大小的孩子。

如果你想尝试一下：

【讨论】：