跨不同父元素的.target类奇偶选择：CSS实现方法咨询

嘿，这个问题我之前也碰到过！确实，当.target元素分散在不同父元素里时，CSS原生的nth-child()和nth-of-type()会因为计数范围仅限元素的直接父元素，没法实现类似jQueryeven()/odd()那种全局统计所有匹配元素并选中偶数/奇数项的效果——你之前的判断是对的，这俩选择器确实不适用这种场景。

下面给你两种可行的实现思路：

方案1：结合少量JavaScript（最可靠的全局选中方案） #

因为纯CSS目前没有全局范围的元素计数能力，所以最简单的方式是用JS给全局顺序下的偶数/奇数.target添加类，再用CSS样式化：

第一步：添加分类类名 #

// 选中所有.target元素，按页面中出现的顺序标记类名
// 注意：jQuery的even()是索引从0开始，所以第一个元素属于even组，这里对应上
document.querySelectorAll('.target').forEach((element, index) => {
  if (index % 2 === 0) {
    element.classList.add('global-even');
  } else {
    element.classList.add('global-odd');
  }
});

第二步：用CSS样式化 #

/* 对应jQuery even()选中的元素 */
.target.global-even {
  background-color: #e6f7ff;
}

/* 对应jQuery odd()选中的元素 */
.target.global-odd {
  background-color: #fff7e6;
}

方案2：纯CSS（仅适用于DOM结构有规律的场景） #

如果你的.target的父元素都是同一层级的兄弟元素，且每个父元素里只有一个.target，可以通过父元素的nth-child()间接选中：

比如DOM结构是这样：

<div class="parent">
  <div class="target">1</div>
</div>
<div class="parent">
  <div class="target">2</div>
</div>
<div class="parent">
  <div class="target">3</div>
</div>

那可以用：

/* 选中父元素为偶数位置下的.target（对应全局偶数项） */
.parent:nth-child(even) .target {
  background-color: #e6f7ff;
}

/* 选中父元素为奇数位置下的.target（对应全局奇数项） */
.parent:nth-child(odd) .target {
  background-color: #fff7e6;
}

但如果父元素里有多个.target，或者父元素层级不规律，这个方法就失效了。

补充：为什么nth-child()/nth-of-type()不生效？ #

举个例子，假设你的DOM结构是：

<div class="parent">
  <div class="other">无关元素</div>
  <div class="target">1</div>
</div>
<div class="parent">
  <div class="target">2</div>
  <div class="target">3</div>
</div>

• nth-child(odd)会选中每个父元素里的第1、3...个子元素，不管它是不是.target
• nth-of-type(odd)会选中每个父元素里的第1、3...个同类型元素（比如这里的<div>），同样不会全局统计所有.target的顺序

所以这俩选择器的计数范围都是父元素内部，没法跨父元素统计全局的.target列表。

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