CSS - 選擇器以最大順序定位元素？

Question

首先，我知道這可以通過 JS 來完成（目前已經實現了這種方法），但如果可能的話，我更喜歡使用原生 CSS。 更少的 JS、更少的 DOM 訪問等等。

TL; 博士

是否有一個 CSS 選擇器來定位具有特定 CSS 屬性的元素？ 更具體地說，以具有最大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元素的邊距。

Answer 2

你能在你的<ul>上的::after偽元素上設置一個邊距嗎？

例如

ul.list::after {
  margin-bottom: 5px;
  content: "";
  display: inline-block;
}

Answer 3

由於問題中提到the number of list items is constant的，因此您可以使用屬性選擇器為最大的順序元素設置 CSS。

免責聲明：

但是請注意，這個選擇器非常fragile ，選擇器的內容需要和 style 屬性的內容完全一樣。

 li[style*="order: 4;"] { background-color: lightblue; } .list-container { overflow: auto; } ul.list { display: flex; flex-direction: column; list-style: none; } li { ... other rules margin-bottom: 5px; } li:last-child { margin-bottom: 0; }

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