是否存在针对特定网格位置元素的选择器？

我有一堆自动流动的网格物品的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结束，并在将来可能会改变。

来源

2017-05-24 John B

也许[这个问题]（https://stackoverflow.com/questions/41577309/how-do-i-access-certain-column-in-bootstrap-grid-system）可以帮助你以某种方式？ –

@kevinb。这是引导“网格”框架。 OP'using CSS native' display：grid;' –

为什么不使用'：nth-child'？ –

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

flexbox存在类似问题：根据布局方式，没有用于匹配特定Flex项目的选择器。一般来说，没有选择器根据它们的布局来匹配元素，这由CSS控制。选择器只匹配基于文档语义（源顺序等）的元素。

要设置所需元素的样式，您需要使用一些其他方法（如客户端脚本）或一些后端逻辑来标识它们（如果网格布局已配置在后端内）。你如何做到这一点不在这个问题的范围之内。

来源

2017-05-24 15:23:31 BoltClock

这就是我所害怕的。我想我们必须等待选择器5或更高版本。 –

是否存在针对特定网格位置元素的选择器？

回答

相关问题