CSS: select last ordered flex children

问题

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

回答1:

The only close solution to this is may be

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

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.

回答2:

Your code isnt complete. You have to provide a flex wrapper to your divs (display: flex), so that =order: will validate. Therefore, .wrapper div:last-child should do the trick.

来源：https://stackoverflow.com/questions/29709793/css-select-last-ordered-flex-children