CSS中如何让nth-child仅针对指定类元素的奇偶位置生效？

嘿，这个坑我刚学CSS选择器的时候也踩过！先给你把问题掰明白，再给你几个实用的解决办法：

为什么你的代码没达到预期？ #

核心问题出在**nth-child的工作逻辑和你想的完全不一样**：它是根据父元素下所有子元素的位置来匹配，不是只看你指定的类。

拿你的HTML结构举例，.project-gallery下的子元素顺序是：

1. <a class="fancybox landscape">A</a>
2. <a class="fancybox portrait">B</a>
3. <a class="fancybox portrait">C</a>
4. <a class="fancybox landscape">D</a>

你写的.project-gallery .portrait:nth-child(odd)，实际是在找「父元素里第1、3、5...个子元素，同时这个子元素还得有.portrait类」——所以C是父元素的第3个子元素（奇数位），刚好带.portrait类，就被匹配到了；而B是父元素的第2个子元素（偶数位），所以命中even的规则。

至于nth-of-type，它是按元素类型（比如<a>、<div>）来计数的，你的所有子元素都是<a>标签，所以它的计数逻辑和nth-child完全一致，还是会把landscape类的元素算进去，自然也解决不了问题。

可行的解决方案 #

方案1：调整HTML结构（最稳妥，兼容性拉满） #

如果能改HTML的话，这是最优解——把所有.portrait元素放到一个独立的容器里，这样nth-child就只会在这个容器内计数，完全符合你想要的「针对portrait类自己的奇偶顺序」生效的需求：

<div class="project-gallery">
  <a class="fancybox landscape">A</a>
  <!-- 把所有portrait元素打包到单独容器里 -->
  <div class="portrait-group">
    <a class="fancybox portrait">B</a>
    <a class="fancybox portrait">C</a>
  </div>
  <a class="fancybox landscape">D</a>
</div>

对应的CSS改成这样：

.project-gallery .portrait-group .portrait:nth-child(odd) {
  padding-left: 0 !important;
}
.project-gallery .portrait-group .portrait:nth-child(even) {
  padding-right: 0 !important;
}

现在B是portrait-group下的第1个子元素（奇数位），C是第2个（偶数位），完美匹配你的需求。

方案2：用JavaScript辅助（无需改HTML，兼容性好） #

如果没法调整HTML结构，用几行JS给每个.portrait元素手动标记奇偶类，是最省心的办法，所有浏览器都能兼容：

// 选中所有portrait元素
const portraitItems = document.querySelectorAll('.project-gallery .portrait');
// 遍历给每个元素加奇偶类
portraitItems.forEach((item, index) => {
  if (index % 2 === 0) {
    item.classList.add('portrait-odd');
  } else {
    item.classList.add('portrait-even');
  }
});

然后CSS直接用这些类写规则：

.project-gallery .portrait-odd {
  padding-left: 0 !important;
}
.project-gallery .portrait-even {
  padding-right: 0 !important;
}

方案3：现代浏览器专属的:has()选择器 #

如果你的目标浏览器都是较新版本（Chrome 105+、Firefox 121+），可以用:has()选择器来模拟「仅针对portrait类计数」的效果，无需改HTML也不用JS：

/* 匹配第1、3、5...个.portrait元素（奇数位） */
.project-gallery .portrait:first-of-type,
.project-gallery .portrait:has(~ .portrait:has(~ .portrait)) {
  padding-left: 0 !important;
}

/* 匹配第2、4、6...个.portrait元素（偶数位） */
.project-gallery .portrait:has(~ .portrait):not(:has(~ .portrait:has(~ .portrait))) {
  padding-right: 0 !important;
}

不过这个写法有点绕，而且兼容性有限，更适合纯CSS场景下的现代项目。

内容来源于stack exchange