:nth-last-child(1) 行或列反转？答案

【问题标题】：:nth-last-child(1) with row or column reverse?:nth-last-child(1) 行或列反转？
【发布时间】：2018-08-06 07:18:43
【问题描述】：

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

示例：

我有一个清单。我希望最后一个元素的背景颜色为红色。所以，在第一个列表上，没关系。在第二个列表中，该列表是还原的，这是不正确的，因为最后一个元素是“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 的良好做法恢复列表，我如何才能选择最后一个元素？

【问题讨论】：

标签： css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

你不需要.rev-fix，但你的直觉是正确的——当它被逆转时，你确实需要改变行为。 last-child 或 nth-last-child 指的是 HTML 顺序，而不是布局。在.rev-fix 翻转中使用这个：

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

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

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

【讨论】：