CSS：选择最后一个有序的Flex子元素

Question

如果有任意数量的 Flexbox 子元素，其中使用内联 order 属性进行排序，那么如何在 CSS 中选择最后一个排序的元素呢？

给定一个具有内联 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解决方案。

- silverwind

---

您需要使用JavaScript来测试订单值，CSS不能实现这一点 :( - G-Cyrillus

相关：https://dev59.com/bpTfa4cB1Zd3GeqPKgG9 - Michael Benjamin

Answer 1

唯一接近解决方案可能是：

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

这将为第6个订单着上黄色的背景色，但由于我们不知道数组的长度，似乎需要使用一些类似于JavaScript或jQuery的选择器语法，其中数字6在这种情况下将是一个具有数组长度的变量。

- Marin Takanov

---

好的，也许我应该向工作组提议使用:first-order、:last-order、:nth-order。请问需要翻译其他内容吗？ - silverwind

Answer 2

在@Marin Takanov上面的答案中，补充一点，这种方法只适用于内联设置order样式。如果钩入样式表中设置的order，则会失败，这很烦人，特别是当你只能访问样式表而无法访问实际代码时。

HTML

<ul>
  <li id="o4" style="order: 4">4</li>
  <li id="o5" style="order: 5">5</li>
  <li id="o6" style="order: 6">6</li>
  <li id="o3">3</li> <!-- Fails -->
  <li id="o1" style="order: 1">1</li>
  <li id="o2" style="order: 2">2
    <ul>
      <li id="o2s1" style="order: 1">a</li>
      <li id="o2s2" style="order: 2">b</li>
      <li id="o2s6" style="order: 6">f</li>
      <li id="o2s3">c</li> <!-- Fails -->
      <li id="o2s4" style="order: 4">d</li>
      <li id="o2s5" style="order: 5">e</li>
    </ul>
  </li>
</ul>

SCSS：

ul {
  display: flex;
  flex-direction: column;

  li#o3 {
    order: 3;
  }

  li[style="order: 3"] {
    background-color: red;
  }

  li#o6 {
    order: 6;
  }

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

JSFiddle：

https://dev59.com/oF0b5IYBdhLWcg3wA9Eb#29719382

- Eric Norcross

Answer 3

你的代码还不完整。你需要给你的div加一个flex包装器（display: flex），这样=order: 才能生效。 因此，.wrapper div:last-child应该可以解决问题。

- designarti

---

你确定吗？http://codepen.io/anon/pen/ZGzLer:last-child仍然是来自DOM而不是重新排序的。所以是:first-type，nth-last-of-type(x)，... ;) - G-Cyrillus

我认为你是正确的。CSS无法工作。我应该编辑我的答案吗？ - designarti

是的，我使用了 display:flex 父元素。但仍然遗憾的是，这不能完全通过 CSS 实现。 - silverwind