CSS：选择最后一次排序的flex children [英] CSS: select last ordered flex children

问题描述

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

Given an arbitary number of flexbox children with an inline order attribute used for sorting, how would one select the last ordered element in 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 t对flex子项工作，并且列表可以是任何长度，因此按顺序索引选择不是一个选项。我对JavaScript解决方案不感兴趣。

:last-of-type doesn't work on flex children, and the list can be any length, so selecting by order index isn't an option. I'm not interested in JavaScript solutions.

推荐答案

这个唯一的紧密解决方案可能是

The only close solution to this is may be

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

这将使用黄色为背景颜色为第6顺序，不知道数组的长度，看起来像你需要一些javascript或jQuery与类似的选择器sintaxis其中数字6在这种情况下将是一个变量与数组的长度。

And this will color the background with yellow for the 6th order, but since we don't know the length of the array, it seems like you'll need some javascript or jQuery with similar selector sintaxis where the number 6 in this case will be a variable with the array's length.

这篇关于CSS：选择最后一次排序的flex children的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！