Question

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

TL; DR

是否有一个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的技巧来完成同样的工作？

非常感谢！

Answer 1

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

Answer 2

您可以在<ul>上的::after伪元素上设置保证金吗？

E.g。

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

Answer 3

由于问题中说the number of list items is constant，您可以使用属性选择器为最大的order元素设置CSS。

<强>声明：

但请注意，此选择器非常 fragile 和选择器内容需要与样式的内容完全相同属性。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: