动态重排flexbox后，如何定位目标显示元素并移除右侧边框？

你需要针对通过order属性重排后的Flex元素，移除最后一个非.to-back元素和最后一个.to-back元素的右侧边框。

首先要明确：CSS的结构伪类（如:first-child/:last-child）是基于DOM节点的原始顺序，而非Flex重排后的视觉顺序，所以直接用这类伪类无法定位目标元素。下面提供两种可行方案：

方案一：CSS :has 选择器实现（现代浏览器支持） #

利用:has选择器判断元素后方是否存在同类型的兄弟元素，以此定位视觉上的最后一个目标元素：

.flex{
 display: flex;
}

.item {
  border: 1px solid grey;
  padding: 0.25em;
}

.to-back {
  order: 2;
}

/* 移除最后一个非.to-back元素的右侧边框 */
.item:not(.to-back):not(:has(~ .item:not(.to-back))) {
  border-right: none;
}

/* 移除最后一个.to-back元素的右侧边框 */
.item.to-back:not(:has(~ .item.to-back)) {
  border-right: none;
}

解释：

• :has(~ .item:not(.to-back)) 表示当前元素后方存在同级的非.to-back元素，加上:not()后，就匹配后方没有其他非.to-back元素的项——也就是视觉上最后一个非.to-back元素（同order的元素按DOM顺序排列，DOM里最后一个非.to-back就是视觉排序的最后一个）。
• 同理，.item.to-back:not(:has(~ .item.to-back)) 匹配视觉上最后一个.to-back元素。

兼容性说明：:has选择器支持Chrome 105+、Firefox 121+、Safari 15.4+，适合现代浏览器环境。

方案二：JavaScript动态处理（兼容旧浏览器） #

如果需要兼容不支持:has的浏览器，可以通过JS获取Flex重排后的元素顺序，再给目标元素移除边框：

<div class="flex">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item to-back">3</div>
  <div class="item">4</div>
  <div class="item to-back">5</div>
  <div class="item">6</div>
</div>

<style>
.flex{
 display: flex;
}

.item {
  border: 1px solid grey;
  padding: 0.25em;
}

.to-back {
  order: 2;
}
</style>

<script>
const flexContainer = document.querySelector('.flex');
// 按Flex重排后的顺序对元素排序
const sortedItems = Array.from(flexContainer.children).sort((a, b) => {
  const orderA = parseInt(window.getComputedStyle(a).order) || 0;
  const orderB = parseInt(window.getComputedStyle(b).order) || 0;
  // 先按order值排序
  if (orderA !== orderB) return orderA - orderB;
  // order值相同则按原始DOM顺序排序
  return Array.from(flexContainer.children).indexOf(a) - Array.from(flexContainer.children).indexOf(b);
});

// 处理最后一个非.to-back元素
const nonToBackItems = sortedItems.filter(item => !item.classList.contains('to-back'));
if (nonToBackItems.length) {
  nonToBackItems.at(-1).style.borderRight = 'none';
}

// 处理最后一个.to-back元素
const toBackItems = sortedItems.filter(item => item.classList.contains('to-back'));
if (toBackItems.length) {
  toBackItems.at(-1).style.borderRight = 'none';
}
</script>

解释：

• 通过window.getComputedStyle获取每个元素的order值，按order和DOM顺序排序，得到视觉上的元素序列。
• 筛选出两类元素后，取各自的最后一项移除右侧边框。

内容的提问来源于stack exchange，提问作者Laczkó Örs