我有一个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结尾,并可能在将来更改.
解决方法
使用CSS渲染网格时,没有用于匹配某些网格位置中元素的选择器.
grid-structural selectors introduced in Selectors 4只匹配基于文档语义表达的网格结构的元素,例如HTML中的表格(这也意味着当它们是使用display：table- *呈现的非表格元素时,它们无法匹配基于网格语义的元素).
flexBox存在类似的问题：没有选择器可根据布局方式匹配特定的弹性项目.通常,没有选择器根据CSS的布局来匹配元素.选择器仅匹配基于文档语义的元素(源顺序等).
要设置所需元素的样式,您需要使用其他方法(例如客户端脚本)或某些后端逻辑来标识它们,这些后端逻辑根据网格位置标记具有类的元素(如果在后端配置网格布局) .你如何做到这一点超出了这个问题的范围.