能否用纯CSS选择不含特定类的每第二个元素？

哎，这个坑我之前踩过！你写的li:not(.hidden):nth-child(2n)其实达不到预期效果，原因很关键：:nth-child(2n)是根据元素在父节点里的原始DOM位置计数的，不管:not(.hidden)有没有把它过滤掉。

举个实际例子：如果你的列表是这样的：

<ul>
  <li>可见项1</li>
  <li class="hidden">隐藏项</li>
  <li>可见项2</li>
  <li>可见项3</li>
</ul>

用li:not(.hidden):nth-child(2n)会选中原始位置为2、4的元素——也就是那个隐藏的<li>和可见项3，完全不是你想要的“每第二个可见元素”。

那纯CSS能不能实现这个需求？很遗憾，目前原生CSS没有直接的方法。因为所有:nth-*系列选择器都是基于完整的DOM子元素列表来计算位置，没法先过滤掉特定类再计数。

不过有两个可行的替代方案：

方案1：用JavaScript辅助（最靠谱） #

既然CSS搞不定，我们可以用JS先筛选出所有可见元素，然后给每第二个元素加个自定义类，再用CSS样式：

// 获取所有非隐藏的li元素
const visibleItems = document.querySelectorAll('li:not(.hidden)');
// 遍历，给索引为奇数的元素加类（因为索引从0开始，第2、4...个元素对应索引1、3...）
visibleItems.forEach((item, index) => {
  if (index % 2 === 1) {
    item.classList.add('even-visible');
  }
});

然后CSS里写：

.even-visible {
  background: gray;
}

这个方法兼容性好，逻辑清晰，不管隐藏元素用什么方式隐藏（display: none/visibility: hidden都没问题）。

方案2：调整布局逻辑（仅限特定场景） #

如果你的隐藏元素是用display: none完全移除布局流的，并且可以用Flexbox/Grid来排列列表，那可以试试把父元素设为Flex/Grid容器，让可见元素自动填充布局。但要注意，这种方式本质还是依赖DOM原始结构，只有当隐藏元素被动态从DOM中移除时，li:nth-child(2n)才能正常工作，场景比较受限，一般不如JS方案灵活。

总结一下：纯CSS原生做不到“过滤特定类后选每第二个元素”，最实用的方式还是用JS辅助标记目标元素，再用CSS样式。

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