如何用JavaScript或CSS选择器选中Flex重排后视觉首个元素？

Great question! Unfortunately, there's no pure CSS solution for this—CSS selectors like :first-child or :first-of-type only reference the DOM order, not the visual order created by the order property. But we can use JavaScript to accurately find the visually first element by checking its rendered position.

Why CSS Can't Do This #

CSS selectors don't have access to computed layout information. The order property changes where elements appear visually but doesn't alter their position in the DOM, so standard selectors will always target elements based on their original DOM placement, not their rendered order.

JavaScript Solution #

We can compare the bounding rectangles of each flex item to determine which one appears first visually. For a column-direction flex container, we'll check the top position; for row-direction, we'll check the left position.

Here's a reusable function that works for both flex directions:

function getVisuallyFirstFlexItem(flexContainer) {
  const items = Array.from(flexContainer.children);
  if (items.length === 0) return null;

  // Get the flex direction of the container
  const computedStyle = window.getComputedStyle(flexContainer);
  const isColumnLayout = computedStyle.flexDirection.startsWith('column');

  // Find the item with the smallest top (column) or left (row) position
  return items.reduce((currentFirst, item) => {
    const currentRect = currentFirst.getBoundingClientRect();
    const itemRect = item.getBoundingClientRect();

    if (isColumnLayout) {
      return itemRect.top < currentRect.top ? item : currentFirst;
    } else {
      return itemRect.left < currentRect.left ? item : currentFirst;
    }
  });
}

// Usage with your example HTML:
const flexList = document.querySelector('ul');
const visuallyFirstItem = getVisuallyFirstFlexItem(flexList);
console.log(visuallyFirstItem.textContent); // Logs "select me please"

How This Works #

1. We convert the container's children into an array to use array methods like reduce.
2. We check the flex direction of the container to know which axis to compare.
3. Using getBoundingClientRect(), we get the rendered position of each item and compare their top/left values to find the one that appears first visually.

Edge Cases to Consider #

• If items overlap, this will select the one whose bounding box starts first (smallest top/left).
• For wrapped flex layouts (using flex-wrap: wrap), this still works because we're comparing the actual rendered position of each element.

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