是否有选择器针对某些网格位置中的元素？ [英] Are there selectors that target elements in certain grid positions?
问题描述
我有一堆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;文本对齐：中心;字体大小：3EM;最小高度：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结尾，并可能在将来发生变化。 h2_lin>解决方案
当使用CSS呈现网格时，在某些网格位置没有匹配元素的选择器。在选择器4中引入的网格结构选择器仅匹配基于网格的元素结构以文档语义表达，例如HTML中的表格（这也意味着当它们是使用 Flexbox中存在类似的问题：根据布局方式，没有用于匹配特定Flex项目的选择器。一般来说，没有选择器根据它们的布局来匹配元素，这由CSS控制。选择器只匹配基于文档语义（源顺序等）的元素。 要设置所需元素的样式，您需要使用其他方法识别它们，例如a客户端脚本或一些后端逻辑，它们根据网格位置（如果网格布局配置在后端内）标记具有类的元素。你如何做这件事超出了这个问题的范围。 I have a CSS grid with a bunch of auto-flowed grid items. Sometimes the grid items are one 1 x 1 track, and sometimes they're 2 x 2 tracks, so I do not know from the source order which items will be in certain positions in the grid. This means that styling with I would like to add styling to items in certain grid columns, (mostly the last column). Is there a CSS selector that will let me style these items? For example, in this demo, how would I style boxes 3, 5, and 9, (codepen here)?
Edit: The code will end up in a CMS and may change in the future. There are no selectors for matching elements in certain grid positions when the grid is rendered using CSS. The grid-structural selectors introduced in Selectors 4 only match elements based on grid structures expressed in document semantics, such as tables in HTML (which also means that they cannot match elements based on grid semantics when they are non-tabular elements rendered using A similar problem exists with flexbox: there are no selectors for matching specific flex items based on how they are laid out. In general, there are no selectors matching elements based on their layout as governed by CSS. Selectors only match elements based on document semantics (source order, etc). To style the desired elements, you will need to identify them using some other means, such as a client-side script, or some backend logic that labels elements with classes based on their grid positions (if the grid layout is configured within the backend). How you do this is outside the scope of this question. 这篇关于是否有选择器针对某些网格位置中的元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！ display：table - *
:nth-child() will not be reliable. .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>display: table-* either).
