如何用CSS子选择器排除.skip类div，正确选中.element奇偶项？

核心需求是：不管父元素里的.skip元素存在与否，.element类的自身奇数位元素都能被稳定选中，且不能用JavaScript。

现有CSS选择器的限制 #

• :nth-child会统计父元素下所有子元素的位置，.skip会占一个位置，导致奇数位.element的位置偏移；
• :nth-of-type按元素类型统计，但如果.skip和.element都是div，这个选择器还是会把.skip算进去，无法区分。

可行方案 #

方案1：利用:has()选择器适配两种场景

目前主流浏览器（Chrome、Firefox 121+、Safari 15.4+）已支持:has()选择器，可通过它判断父元素是否包含.skip，分别编写选择器：

/* 父元素包含.skip时，选中它后面的奇数位.element */
.skip ~ .element:nth-child(even) {
  background: #f0f0f0; /* 示例样式 */
}

/* 父元素不包含.skip时，直接选中奇数位.element */
:not(:has(.skip)) .element:nth-child(odd) {
  background: #f0f0f0; /* 和上面样式保持一致 */
}

原理：当存在.skip时，第一个.element是父元素的第2个子元素，后续奇数位的.element对应父元素的偶数位置（2、4、6...）；没有.skip时，直接用nth-child(odd)选中.element的奇数位，两种场景下选中的都是.element自身的第1、3、5...个元素。

方案2：修改.skip的元素类型（如果允许）

如果能把.skip改成非div元素（比如span），示例代码如下：

<div>
  <span class="skip">no</span>
  <div class="element">1</div>
  <div class="element">2</div>
  <!-- 其他.element元素 -->
</div>

这时可以直接用:nth-of-type选择器，因为它只统计同类型元素：

.element:nth-of-type(odd) {
  background: #f0f0f0;
}

.skip是span类型，不会被计入div类型的统计，所以不管它存在与否，.element的奇数位都能被稳定选中。

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