javascript - CSS - 选择器以最大顺序定位元素？

Question

首先，我知道这可以通过 JS 完成(目前已经实现了这种方法)，但如果可能的话我更愿意使用原生 CSS。更少的 JS、更少的 DOM 访问等等。

长话短说

是否有 CSS 选择器可以定位具有特定 CSS 属性的元素？更具体地说，以 greatest order 属性为目标的元素？

有点像...

el:greatest(property:order) {...}

设置

我有一个列表，比如...

<div class="list-container">
    <ul class="list">
        <li style="order: 0;">One</li>
        <li style="order: 1;">two</li>
        <li style="order: 2;">three</li>
        ...
        <li style="order: n;">Last</li>
    </ul>
</div>

这用作无限滚动器，因此整个列表 (ul) 在容器内滚动。细节并不是特别重要，但基本上列表项的数量是恒定的，并且会随着用户滚动而被回收。

澄清:即使列表项的数量是恒定的，但最大订单数没有限制。如果初始订单是 order=0, 1, 2, 3(四项列表)，则 0->4，1->5、2->6 等。一次仅更改一个顺序 - 大于所有其他顺序(列表末尾)或小于所有其他顺序(列表开头)。

我通过将列表显示为 flex-box 并以编程方式更改列表项的顺序来完成此回收。

更相关的 CSS 是...

.list-container {
    overflow: scroll;
}

ul.list {
    display: flex;
    flex-direction: column;

    list-style: none;
}

li {
    ... other rules
    margin-bottom: 5px;
}
li:last-child {
    margin-bottom: 0;
}

每个列表项都有一个bottom-margin，它充当每个元素之间的缓冲区(纯粹是为了美观)。但!当您滚动到列表底部并且列表容器底部之前有一个不必要的边距时，它看起来很愚蠢。因此，将 last-child 设置为没有底边距。

列表最终看起来像...

... 注意:将 BG 设置为 red，以便您可以看到填充，并且 li:last-child 将 BG 设置为 aqua，所以你可以看到哪个元素被视为最后一个

问题解决了，对吧!？

那么，问题...

(假设列表有 n 个列表项。)

在普通列表中，上面的 CSS 会很好用。当我获取顶部列表项 (order: 0;) 并重新分配订单以便将其移动到列表底部 (order: n+1;)。即使列表项可能被绘制并显示在列表的底部，它仍然在 DOM 中被视为第一个 列表项。

DOM 看起来像...

<div class="list-container">
    <ul class="list">
        <li style="order: n+1;">One</li>
        <li style="order: 1;">two</li>
        <li style="order: 2;">three</li>
        ...
        <li style="order: n;">Last</li>
    </ul>
</div>

结果看起来像...

因为列表项 order: n; 仍然是 DOM 中的 last-child，所以它的底部边距被移除，即使它下面显示了另一个列表项.

使用 margin-top 和 li:first-child 时也会出现同样的问题。这是不可避免的!

那么，我可以...吗？

是否有原生 CSS 方法来定位具有最大订单号的元素？或者也许还有另一个 CSS-only 技巧来完成同样的事情？

非常感谢!

Answer 1

您可以通过将 ul 元素的底部边距设置为 -5px 并将溢出属性设置为来隐藏它，而不是删除最后一个 li 元素的边距隐藏。