：nth-​​last-child（1）行或列反转？

Question

我想选择列表的最后一项，即使该列表是弹性反转的。

示例：

我有一份清单。我希望最后一个元素中的背景颜色为红色。所以，在第一个列表上，它没问题。在第二个列表中，该列表是还原的，因为最后一个元素是＆＃34; 1＆＃34;而不是＆＃34; 5＆＃34;。所以我创建了一个＆＃34;修复＆＃34;替换CSS值以产生效果的类。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我认为这不是最好的方法。那么即使列表被CSS上的良好实践还原，我如何选择最后一个元素呢？

Answer 1

不幸的是，伪选择器以DOM顺序运行。您可以使用:not伪选择器跳过目标任何弹性反转元素。这将消除对第二类的依赖，以修复所应用的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>

Answer 2

你不需要.rev-fix，但你的直觉是正确的 - 你需要在反转时改变行为。 last-child或nth-last-child是指HTML订单，而不是布局。 .rev-fix翻转的Insead使用此：

.list.rev div:last-child {
  background-color: initial;
}

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

另外，请注意.list div选择器...，您应该为该div类型的事物设置一个类，或使用.list > div确保您没有定位该子树中的所有div。