Question

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

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

例如，在本演示中，我如何设置方框3,5和9的样式，（codepen here）？

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

修改：代码将以CMS结尾，并可能在将来发生变化。

Answer 1

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

flexbox存在类似的问题：没有选择器可根据布局方式匹配特定的弹性项目。通常，没有选择器根据CSS的布局来匹配元素。选择器仅匹配基于文档语义的元素（源顺序等）。

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

是否存在以某些网格位置为目标元素的选择器？

1 个答案: