CSS：flex反转列表下如何用最佳实践选择最后一项？

这个问题的核心其实是对CSS选择器工作逻辑的误解：:nth-last-child()系列选择器是基于DOM节点的原始顺序来匹配的，完全不受Flex布局反转视觉顺序的影响。所以当你用flex-direction: row-reverse或column-reverse反转列表时，视觉上的元素顺序变了，但DOM结构没动，这就导致选择器的匹配结果和你预期的视觉顺序不匹配。

下面根据你的实际需求，给出两种最佳实践方案：

需求1：始终选中DOM结构中的最后一项（逻辑上的最后一项，比如内容为“5”的元素） #

如果你的目标是给DOM里原本的最后一项设置红色背景，不管它在视觉上的位置，那其实:last-child或:nth-last-child(1)本身就是正确的选择器——它们不会被Flex反转影响，始终指向父元素里的最后一个DOM节点。

如果你的列表父元素里还有其他非列表项元素（比如标题、分隔符），可以用:nth-last-of-type(1)来精准匹配同类型的最后一个列表项：

/* 选中列表父元素下的最后一个li元素 */
.list li:nth-last-of-type(1) {
  background-color: red;
}

需求2：始终选中视觉上的最后一项（不管DOM顺序） #

如果你的目标是给视觉呈现的最后一项设置红色背景（比如Flex反转后显示在末尾的内容为“1”的元素），那需要根据Flex的反转方向调整选择器：

方案1：用CSS变量动态切换选择器 #

这种方式不需要额外修改HTML，只需要给父元素添加对应的反转类，然后通过CSS变量自动匹配目标项：

/* 默认正常顺序，选中最后一项 */
.list {
  --target-item: :last-child;
}
/* 水平反转或垂直反转时，选中第一项 */
.list.row-reverse, .list.column-reverse {
  --target-item: :first-child;
}
/* 应用样式 */
.list > *:is(var(--target-item)) {
  background-color: red;
}

使用时，给列表父元素加row-reverse或column-reverse类即可，不需要手动修改选择器。

方案2：用:has()伪类自动识别Flex方向（现代浏览器支持） #

如果你的Flex方向是通过内联样式或类设置的，可以用:has()伪类直接检测父元素的属性，自动适配选择器：

/* 正常顺序时选最后一项 */
.list:not(:has([style*="flex-direction: row-reverse"])):not(:has([style*="flex-direction: column-reverse"])) > :last-child,
/* 反转顺序时选第一项 */
.list:has([style*="flex-direction: row-reverse"]) > :first-child,
.list:has([style*="flex-direction: column-reverse"]) > :first-child {
  background-color: red;
}

这个方案更“智能”，不需要手动管理额外的类，但注意:has()目前在所有现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）都支持，如果你需要兼容旧版浏览器，推荐用方案1。

相比你现在用自定义“fix”类替换CSS值的方式，上面的方案更符合CSS语义化和可维护性的最佳实践——不需要额外的类来标记状态，而是直接基于布局属性来匹配目标元素。

内容的提问来源于stack exchange，提问作者jtwalters