css - :nth-last-child(1) with row or column reverse?

Question

我想选择列表的最后一项，即使该列表是 flex-reversed。

示例:

我有一个 list 。我希望最后一个元素的背景颜色为红色。所以，在第一个列表上，没关系。在第二个列表中，该列表已还原，但不正确，因为最后一个元素是“1”而不是“5”。所以我创建了一个“修复”类来替换 CSS 值来产生效果。

.list {
  background-color: green; 
  margin-bottom: 10px;
}

.list div:nth-last-child(1) {
  background: red;
}

.rev {
  display: flex;
  flex-direction: column-reverse;
}

.rev-fix div:nth-last-child(1) {
  background-color: initial;
}

.rev-fix div:nth-child(1) {
  background-color: red;
}

<div class="list">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="list rev">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="list rev rev-fix">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

我认为这不是最好的方法。那么，即使使用 CSS 上的良好做法恢复了列表，我如何才能选择最后一个元素？

Answer 1

不幸的是，伪选择器以 DOM 顺序运行。您可以使用 :not 伪选择器来跳过定位任何 flex-reversed 元素。这将消除对第二个类的依赖来修复应用的 css

.list {
  background-color: green; 
  margin-bottom: 10px;
}

.rev {
  display: flex;
  flex-direction: column-reverse;
}

.list:not(.rev) div:last-child {
  background: red;
}

.rev div:first-child {
  background: red;
}

<div class="list">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

<div class="list rev">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>