图片示例:3 column grid with 1, 2 or 3 elements on the last line
是否可以仅使用CSS选择最后一行显示的元素?网格中的元素数量会有所不同。以下是如何使用2列网格执行此操作的示例:Select last child when odd, 2 last childs when even
<h2>6 elements</h2>
<ul>
<li>hello ------</li>
<li>hello ------</li>
<li>hello ------</li>
<li style="background: pink;">hello ------</li>
<li style="background: pink;">hello ------</li>
<li style="background: pink;">hello ------</li>
</ul>
<h2>7 elements</h2>
<ul>
<li>hello ------</li>
<li>hello ------</li>
<li>hello ------</li>
<li>hello ------</li>
<li>hello ------</li>
<li>hello ------</li>
<li style="background: pink;">hello ------</li>
</ul>
<h2>8 elements</h2>
<ul>
<li>hello ------</li>
<li>hello ------</li>
<li>hello ------</li>
<li>hello ------</li>
<li>hello ------</li>
<li>hello ------</li>
<li style="background: pink;">hello ------</li>
<li style="background: pink;">hello ------</li>
</ul>
以下是jsfiddle上的HTML示例:https://jsfiddle.net/rm9te941/
由于
答案 0 :(得分:1)
我也说“不”,但也说“为什么不呢?”
您只需选择nth-child(3n)
元素之后的所有元素,但也需要选择:nth-last-child(-n + 4)
,这意味着:
在元素之后的每个元素都是三的倍数 是最后三个要素
li:nth-last-child(-n + 4):nth-child(3n) ~ li {
background: #000;
}
我还制作了fiddle
有趣的是,这适用于每个数量的列,您可以使用列数更改3
。