如何在CSS中定位容器内视觉上的最后一个元素（考虑order属性）

我原本使用:last-child为元素应用CSS样式，但有时需要通过Flex的order属性调整元素顺序，现在想知道能否始终选中视觉上的最后一个子元素。

示例场景 #

现有如下代码：

HTML代码

<div class="parent-container">
  <h1>Foo</h1>
  <h2>Bar</h2>
</div>

SCSS代码

.parent-container {
  display: flex;
  h1 {
    order: 1;
  }
  h2 {
    order: 0; 
  }
  :last-child {
     padding-bottom: 26px;
  }
}

当前:last-child会给DOM结构里的最后一个元素h2添加内边距，但视觉上h1才是最后一个元素，我希望能选中这个视觉上的末尾元素。

背景说明 #

我正在开发一个卡片组件，其中可能包含图片、标题、副标题、描述、按钮等元素，需要根据它们的视觉顺序设置样式。但这些元素的order属性可能来自父网站的iframe，因此得根据元素在容器中的实际视觉位置调整样式。

补充：给子元素加padding-bottom是因为默认情况下图片不需要这个内边距，如果图片被调整到视觉底部，我会给它添加padding-bottom: 0 !important来覆盖原有样式。

解决方案 #

目前CSS没有原生伪类可以直接选中Flex视觉顺序里的最后一个元素——:last-child/:last-of-type都是基于DOM结构的，和视觉渲染顺序无关。可以尝试以下两种方法：

方法1：用JavaScript计算视觉位置

通过JS获取容器内所有子元素的位置，找到最靠右侧（横向Flex）或最靠下（纵向Flex）的元素，给它添加样式或类名：

const parent = document.querySelector('.parent-container');
const children = Array.from(parent.children);

// 横向Flex（row）取最靠右的元素，纵向Flex（column）取最靠下的元素
const visualLastChild = children.reduce((prev, curr) => {
  // 横向场景：计算元素右侧位置（offsetLeft + offsetWidth）
  // 纵向场景：替换为计算元素底部位置（offsetTop + offsetHeight）
  const prevPos = prev.offsetLeft + prev.offsetWidth;
  const currPos = curr.offsetLeft + curr.offsetWidth;
  return currPos > prevPos ? curr : prev;
});

// 直接设置样式
visualLastChild.style.paddingBottom = '26px';
// 或添加类名，方便后续CSS统一控制
visualLastChild.classList.add('visual-last-child');

之后可在CSS中通过类名控制样式，同时处理图片的特殊情况：

.visual-last-child {
  padding-bottom: 26px;
}
.visual-last-child.img {
  padding-bottom: 0 !important;
}

方法2：通过order属性间接控制（限order值可控场景）

如果能确定元素order的最大值，可通过属性选择器选中对应元素：

// 假设最大order值为1
.parent-container [order="1"] {
  padding-bottom: 26px;
}

若order值用CSS变量管理，也可以这样写：

.parent-container {
  --max-order: 1;
  [order="var(--max-order)"] {
    padding-bottom: 26px;
  }
}

注意：这个方法局限性大，若order值来自iframe且不可控，则无法使用。

内容的提问来源于stack exchange，提问作者Raphaël Balet