是否存在CSS/JS的upto选择器？如何获取指定元素的前置同类元素

1. 能否用querySelector直接获取a4之前所有的.bar元素？ #

原生CSS选择器里没有直接的“upto”跨父元素选择器，没法只用一个querySelector/querySelectorAll直接选中a1、a2、a3这类在目标元素之前、跨父元素的同类型元素。不过可以结合JavaScript实现：

// 获取所有.bar元素
const allBars = document.querySelectorAll('.bar');
// 找到a4在集合中的位置
const targetIndex = Array.from(allBars).findIndex(el => el.id === 'a4');
// 截取a4之前的所有.bar元素
const previousBars = Array.from(allBars).slice(0, targetIndex);

2. 如何仅获取a4的前一个同类元素a3？ #

有两种简单方法：

• 方法一：利用父元素的兄弟关系遍历

  // 先找a4的父元素.foo，再取它的前一个兄弟.foo，最后选中里面的.bar
  const prevBar = fourth.parentElement.previousElementSibling.querySelector('.bar');
  

• 方法二：通过元素集合索引获取

  const allBars = document.querySelectorAll('.bar');
  const targetIndex = Array.from(allBars).findIndex(el => el.id === 'a4');
  const prevBar = allBars[targetIndex - 1];
  

3. 是否存在类似“upto”的跨父元素选择器？ #

原生CSS选择器目前没有这类跨父元素的“upto”选择器。CSS的相邻兄弟选择器（+）和通用兄弟选择器（~）只能选中同一个父元素下的后续兄弟元素，没法跨父元素筛选目标元素之前的元素。这类需求只能通过JavaScript结合DOM遍历或元素集合处理来实现。

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