Question

图片示例：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/

由于

Answer 1

我也说“不”，但也说“为什么不呢？”

您只需选择nth-child(3n)元素之后的所有元素，但也需要选择:nth-last-child(-n + 4)，这意味着：

在元素之后的每个元素都是三的倍数是最后三个要素

li:nth-last-child(-n + 4):nth-child(3n) ~ li {
  background: #000;
}

我还制作了fiddle

有趣的是，这适用于每个数量的列，您可以使用列数更改3。

在具有不同数量元素的3列网格中，如何仅使用CSS选择最后一行上显示的元素

1 个答案: