html - 如何将 "last child"样式应用于而不是 :last-child element?

Question

如何将last child 样式应用于不是:last-child 元素？

有没有办法在 html 中指定它是 :last-child，即使它不是？

像这样:

<ul>
  <li></li>
  <li class="last-child"></li>
  <li></li>
</ul>

或者这个:

<ul>
  <li></li>
  <li last-child></li>
  <li></li>
</ul>

:first-child 和 :selected 相同。

Answer 1

您可以利用与 Flexbox/Grid 一起提供的 order 属性:

ul {
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
}

ul > li:nth-child(2) {
  order: 1;
}

ul > li:last-child { /* or "> .last-child" */
  border: 1px solid;
}

<ul>
  <li>First child</li>
  <li>Second child</li>
  <li class="last-child">Last child but not displayed last!</li>
</ul>

默认情况下，order property 的值被设置为 0，所以通过给它赋值 1，我把它放在其他人之后；所以在这里我只针对“第二个 child ” 使代码尽可能短/干净/优化；我也可以通过给它 1 的值来定位 :last-child，但是我还需要定位“second child"通过给它 2 的值来实现与现在相同的结果，但我们不需要使用 order 属性 两次，因为一次就足够了，在这种情况下...