如何用CSS关联不同父容器中元素的对应位置（无需硬编码索引）

嘿，我懂你现在的需求——就是想让.menu里带.show的那个小蓝点，自动对应到同层级的第N个.item显示，同时给父容器加样式，但不想硬写nth-child(4)、nth-child(5)这种固定数字，毕竟你不知道未来会有多少个项，只知道数量是对等的对吧？

先给你说个实在的：纯CSS里目前还没有原生的“把nth-child参数变成变量关联另一个元素位置”的语法，没法直接让.show的位置自动映射到.item的索引。不过我们有两个非常靠谱的解决方案，完全能满足你的需求：

方案1：调整HTML结构，用“配对容器”实现纯CSS关联 #

这是最清爽的纯CSS方案，核心是把每个.menu的小点和对应的.item放在同一个容器里，让它们从“跨容器的对应项”变成“同容器的兄弟”，这样用:has()就能直接关联，完全不用写任何索引：

调整后的HTML #

<div class="parent">
  <div class="menu-item-pair">
    <div class="menu-dot"></div>
    <div class="item">1</div>
  </div>
  <div class="menu-item-pair">
    <div class="menu-dot"></div>
    <div class="item">2</div>
  </div>
  <div class="menu-item-pair">
    <div class="menu-dot"></div>
    <div class="item">3</div>
  </div>
  <div class="menu-item-pair">
    <div class="menu-dot show"></div>
    <div class="item">4</div>
  </div>
  <div class="menu-item-pair">
    <div class="menu-dot"></div>
    <div class="item">5</div>
  </div>
</div>

对应的CSS #

.parent {
  border: 1px solid black;
  position: relative;
  width: fit-content;
  display: flex;
  gap: 4px;
}

.menu-dot {
  height: 10px;
  width: 10px;
  background-color: blue;
  cursor: pointer;
}

.menu-dot.show {
  background-color: red;
}

.item {
  display: none;
  height: 20px;
  width: 10px;
  background-color: green;
  color: white;
  padding: 2px;
  text-align: center;
}

/* 核心逻辑：只要配对容器里的小点有.show，就显示对应的item */
.menu-item-pair:has(.menu-dot.show) .item {
  display: block;
}

/* 父容器只要有选中项，就变红边框 */
.parent:has(.menu-dot.show) {
  border-color: red;
}

这个方案的好处是完全纯CSS，没有任何JS，不管你加多少个配对项，都能自动关联，零维护成本。

方案2：用少量JS+CSS变量，保留原HTML结构 #

如果你不想动现有的HTML结构，那用JS同步选中项的索引到CSS变量是最优雅的方案，相当于模拟出“nth-child的变量参数”效果：

第一步：用JS同步选中索引到CSS变量 #

这段JS的作用是，当你点击.menu里的小点，或者页面初始化有默认选中项时，把它的位置索引存在父容器的CSS变量里：

// 监听.menu的点击事件，更新选中状态和CSS变量
const menu = document.querySelector('.menu');
menu.addEventListener('click', (e) => {
  const targetDot = e.target.closest('.menu > div');
  if (!targetDot) return;

  // 先移除所有小点的.show类
  menu.querySelectorAll('.show').forEach(dot => dot.classList.remove('show'));
  // 给当前点击的小点加.show
  targetDot.classList.add('show');
  // 计算当前小点的索引（nth-child是从1开始计数的，所以要+1）
  const selectedIndex = Array.from(menu.children).indexOf(targetDot) + 1;
  // 把索引存到父容器的CSS变量里
  targetDot.closest('.parent').style.setProperty('--selected-index', selectedIndex);
});

// 页面初始化时，如果有默认的.show小点，同步索引到变量
const defaultShow = document.querySelector('.menu > div.show');
if (defaultShow) {
  const selectedIndex = Array.from(defaultShow.parentElement.children).indexOf(defaultShow) + 1;
  defaultShow.closest('.parent').style.setProperty('--selected-index', selectedIndex);
}

第二步：用CSS变量控制.item的显示 #

现在你可以在CSS里直接用var(--selected-index)来关联位置了，完全不用硬写数字：

.parent {
  border: 1px solid black;
  position: relative;
  width: fit-content;
  --selected-index: 0; /* 默认值，没有选中项时用 */
}

.menu {
  display: flex;
  flex-flow: row nowrap;
  gap: 4px;
}

.menu > div {
  height: 10px;
  width: 10px;
  background-color: blue;
  cursor: pointer;
}

.menu > div.show {
  background-color: red;
}

.item {
  display: none;
  position: absolute;
  height: 20px;
  width: 10px;
  background-color: green;
  color: white;
  padding: 2px;
  text-align: center;
}

/* 核心：用calc计算.item的位置——因为.menu是.parent的第一个子元素，所以第N个.item是.parent的第(N+1)个子元素 */
.parent > .item:nth-child(calc(var(--selected-index) + 1)) {
  display: block;
}

/* 有选中项时，父容器边框变红 */
.parent:has(.menu .show) {
  border-color: red;
}

这个方案完全保留了你原来的HTML结构，JS代码也非常轻量，不管你加多少个小点和.item，都能自动对应，扩展性拉满。

针对你补充的下拉菜单例子的优化 #

看了你后来加的那个文件夹下拉菜单的例子，其实也可以用这个JS+CSS变量的思路简化代码——不用写show0、show1这种硬编码的类名，直接用一个show类，然后用CSS变量控制下拉框的位置：

const catObj = {
  selDropArrow: null,
  dropSelects: document.querySelectorAll('.dropSelect'),
  activeSelectIndex: 0
};

const catPathWrapper = document.querySelector('.catPathWrapper');
catPathWrapper.addEventListener('mousedown', (evt) => {
  const targetArrow = evt.target.closest('.dropArrow');
  if (!targetArrow) return;

  // 如果点击的是已选中的箭头，就关闭下拉
  if (catObj.selDropArrow === targetArrow) {
    targetArrow.classList.remove('show');
    catObj.selDropArrow = null;
    catObj.dropSelects.forEach(select => select.style.transform = 'translateY(0)');
    return;
  }

  // 切换到新的箭头
  if (catObj.selDropArrow) {
    catObj.selDropArrow.classList.remove('show');
    // 切换复用的下拉框
    catObj.activeSelectIndex = catObj.activeSelectIndex === 0 ? 1 : 0;
  }

  // 给当前箭头加.show类
  targetArrow.classList.add('show');
  catObj.selDropArrow = targetArrow;
  // 控制下拉框的位置和显示
  const arrowLeft = targetArrow.parentNode.offsetLeft;
  const activeSelect = catObj.dropSelects[catObj.activeSelectIndex];
  activeSelect.style.left = `${arrowLeft}px`;
  activeSelect.style.transform = 'translateY(100%)';
});

对应的CSS可以简化成：

.catPath {
  position: relative;
  padding-bottom: 10px;
  background-color: rgb(181,192,197);
}

.catPathWrapper {
  position: relative;
  z-index: 2;
  padding-top: 10px;
  background-color: inherit;
  display: flex;
  gap: 20px;
}

.catPathNode button.dropArrow > div {
  border-radius: 3px;
  border-top: 12px solid rgb(100,100,100);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 0;
  transition: transform 300ms ease-in-out;
}

/* 不用多个show类，一个就够 */
.catPathNode button.dropArrow.show > div {
  transform: rotate(-180deg);
}

.dropSelect {
  transition: transform 300ms ease-in-out;
  transform: translateY(0);
  height: 100px;
  width: 150px;
  background-color: white;
  border: 1px solid black;
  position: absolute;
  bottom: 10px;
  z-index: 1;
}

这样代码更干净，也不用为了复用下拉框写一堆重复的类名，维护起来方便多了。

内容来源于stack exchange