Question

给定具有用于排序的内联order属性的任意数量的flexbox子项，如何选择CSS中的最后一个有序元素？

<ul style="display:flex">
  <li style="order: 4">a</li>
  <li style="order: 5">b</li>
  <li style="order: 3">c</li>
  <li style="order: 1">d</li>
  <li style="order: 2">e</li>
</ul>

:last-of-type不适用于flex子项，列表可以是任何长度，因此不能选择按顺序索引。我对JavaScript解决方案不感兴趣。

Answer 1

唯一可以解决的问题可能是

div[style="order: 6"] {
    background-color: yellow;
}

这将为黄色背景为第6个顺序着色，但由于我们不知道数组的长度，看起来你需要一些javascript或jQuery与类似的选择器sintaxis，其中数字为6 case将是一个具有数组长度的变量。

Answer 2

您的代码不完整。你必须为你的div提供一个flex包装器（display：flex），这样= order：将验证。因此，.wrapper div：last-child应该这样做。

CSS：选择最后排序的flex子项

2 个答案: