如何选择非直接子元素中的奇数元素？CSS nth-child选择器疑问

嘿，我懂你现在卡在哪了——你想给页面里所有奇数位置的.progress-bar换个背景色，但试了半天只能改.progress的样式，不知道怎么精准选中目标元素对吧？下面分两种常见场景给你捋清楚解决方案：

场景1：每个.progress容器内的奇数位置.progress-bar #

先假设你的DOM结构大概是这样（.progress-bar是.progress的后代，可能还有嵌套的容器）：

<div class="progress">
  <div class="step-wrapper">
    <div class="progress-bar">第1个</div> <!-- 要选中的奇数项 -->
  </div>
  <div class="step-wrapper">
    <div class="progress-bar">第2个</div>
  </div>
  <div class="step-wrapper">
    <div class="progress-bar">第3个</div> <!-- 要选中的奇数项 -->
  </div>
</div>
<div class="progress">
  <div class="progress-bar">第1个</div> <!-- 要选中的奇数项 -->
  <p>一些无关内容</p>
  <div class="progress-bar">第2个</div>
</div>

情况A：.progress-bar被统一的容器包裹 #

如果每个.progress-bar都在一个类似.step-wrapper的容器里，那可以先选中奇数位置的包裹容器，再定位到里面的.progress-bar：

.progress .step-wrapper:nth-child(odd) .progress-bar {
  background-color: #ff6b6b; /* 给奇数项换个显眼的红色 */
}

情况B：.progress下直接混杂.progress-bar和其他元素 #

如果.progress下面直接有.progress-bar和其他元素（比如上面例子里的<p>），想选中每个.progress里位置为奇数的.progress-bar（相对于它们的直接父元素），直接这么写：

.progress .progress-bar:nth-child(odd) {
  background-color: #ff6b6b;
}

特殊情况：只统计.progress-bar的数量（忽略其他元素） #

如果你的需求是不管.progress里有多少其他元素，只把所有.progress-bar按1、2、3排序，选中奇数个，那CSS原生的选择器搞不定——因为:nth-child/:nth-of-type都是按父元素里的所有元素（或同类型元素）计数，不是按类。这种情况要么调整DOM结构，要么用JS来处理（后面场景2会讲）。

场景2：页面中全局的奇数位置.progress-bar #

如果你的需求是整个页面里所有.progress-bar中，第1、3、5...个（不管它们属于哪个.progress容器），那CSS真的做不到——因为CSS的计数选择器都是相对于元素的直接父元素的，没法跨父元素全局计数。这时候就得靠JavaScript了：

// 先拿到所有.progress-bar元素
const progressBars = document.querySelectorAll('.progress-bar');
// 遍历数组，给奇数索引（注意JS索引从0开始，所以0、2、4对应第1、3、5个）的元素加样式
progressBars.forEach((bar, index) => {
  if (index % 2 === 0) {
    bar.style.backgroundColor = '#ff6b6b';
    // 或者加个类名，更符合CSS模块化的习惯
    // bar.classList.add('odd-progress-bar');
  }
});

如果用类名的话，记得在CSS里定义好.odd-progress-bar的样式哦~

为什么你之前的尝试没生效？ #

你说“仅能修改div class="progress"元素的颜色”，大概率是选择器的层级写错了！比如你可能写了.progress:nth-child(odd)——这个是选中奇数位置的.progress容器本身，当然只能改它的颜色。你需要把选择器往下延伸一级，精准定位到.progress里面的.progress-bar才行。

给你对比下：

/* ❌ 错误：修改的是奇数位置的.progress容器 */
.progress:nth-child(odd) {
  background-color: red;
}

/* ✅ 正确：修改每个.progress下的奇数位置.progress-bar */
.progress .progress-bar:nth-child(odd) {
  background-color: red;
}

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