这问题我之前踩过坑！确实，常规的nth-child选择器会把父容器里所有子元素都算进去，不管你有没有指定类，所以中间插了.not_block的div后，选择逻辑直接乱掉了。下面给你两个靠谱的解决方案：

方案一：使用CSS Selectors Level 4的精准筛选语法 #

现在主流浏览器已经支持nth-child(an+b of <selector>)这个新语法，它能先筛选出符合指定选择器的元素，再在这些元素里按位置筛选，完美避开干扰项。

你只需要把原来的选择器改成这样：

.block:nth-child(even of .block) {
  /* 这里写你的样式，比如背景色 */
  background-color: #ff4444;
}

这个选择器的逻辑是：先找出父容器里所有带.block类的元素，然后在这些元素中选择偶数位的（第2、4、6...个），完全不会被.not_block元素影响。

方案二：用JavaScript兼容旧浏览器 #

如果需要兼容一些不支持CSS Level 4语法的旧浏览器，可以用JS来手动筛选：

// 获取所有带.block类的元素
const blockElements = document.querySelectorAll('.block');

// 遍历这些元素，给偶数位的添加样式
blockElements.forEach((el, index) => {
  // 注意：index从0开始，所以偶数位对应的是index+1为偶数，也就是index是奇数的情况
  if ((index + 1) % 2 === 0) {
    el.style.backgroundColor = '#ff4444';
    // 也可以添加类名，方便后续样式维护
    // el.classList.add('even-block');
  }
});

这种方法兼容性更好，而且逻辑清晰，完全不受其他干扰元素影响。

为什么原来的nth-child会失效？ #

再给你补个小知识点：nth-child(even)是基于父容器中所有子元素的位置来判断的，不是只看带.block类的元素。比如你在第3个位置插了.not_block的div，那后面的.block元素在父容器里的位置就变成了4、5...，这时候nth-child(even)会选中父容器里第2、4、6...个元素，而第4个元素其实是第3个.block，这就和你要的“偶数位.block”不符了。

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