为何CSS的nth-child()选择器会计入display:none元素？如何规避？

这个现象是完全正常的，这正是CSS规范定义的:nth-child()的工作逻辑，下面给你拆解原因和解决办法：

为什么会这样？ #

:nth-child()选择器的核心逻辑是基于元素在父容器中的DOM节点位置来匹配，不管这个元素是否设置了display:none——毕竟display:none只是让元素在页面上不可见，但它仍然是父容器的子节点，DOM树里的位置序号不会因为隐藏而改变。

看你的示例代码：

<div class="container">
  <div class="top"></div> <!-- 第1个子节点 -->
  <div class="content"></div> <!-- 第2个子节点 -->
  <div class="mid"></div> <!-- 第3个子节点 -->
  <div class="mid"></div> <!-- 第4个子节点 -->
  <div class="bottom"></div> <!-- 第5个子节点 -->
</div>

哪怕前两个div设置了display:none，它们的位置序号还是1和2。你写的.mid:nth-child(2)是要找“父容器中第2个子节点且是.mid类的元素”，但第2个元素是.content，自然匹配不上；而第4个子节点才是.mid，所以.mid:nth-child(4)能生效。

如何规避这个行为？ #

根据你的场景（动态添加/移除隐藏元素，不想频繁修改:nth-child()的序号），可以试试这几个方案：

1. 使用兄弟选择器定位（推荐，无需依赖序号） #

如果隐藏元素固定在.mid前面，你可以用相邻兄弟或通用兄弟选择器来定位目标.mid，完全避开序号问题：

/* 选中第一个.mid */
.top + .content + .mid {
  background-color: red;
}
/* 选中第二个.mid */
.top + .content + .mid + .mid {
  background-color: blue;
}

不管前面新增多少个隐藏的div，只要.mid在这些隐藏元素之后，这个选择器都能准确匹配。

2. 用JavaScript动态给可见的.mid添加序号类 #

如果兄弟选择器不够灵活（比如隐藏元素位置不固定），可以用JS遍历.mid元素，给排除隐藏类的元素添加自定义序号类：

const midElements = document.querySelectorAll('.container .mid:not(.top):not(.content)');
midElements.forEach((el, index) => {
  el.classList.add(`mid-${index + 1}`);
});

然后在CSS里用类选择器：

.mid-1 {
  background-color: red;
}

这样不管DOM里有多少隐藏元素，样式都能精准作用在目标元素上，而且动态添加/移除隐藏元素后，重新执行这段JS即可更新类。

3. 使用:nth-of-type()（仅当目标元素类型唯一时适用） #

如果你的.mid是某一类独特的标签（比如不是div，而是<section>），而隐藏元素是div，那:nth-of-type()会只计数同类型的元素：

/* 只会计数父容器中的section元素，忽略div */
.mid:nth-of-type(1) {
  background-color: red;
}

但如果所有元素都是同类型（比如都是div），这个方法就不适用了，因为它还是会包含display:none的同类型元素。

4. 调整DOM结构，将隐藏元素移出目标容器 #

如果可行的话，把那些动态的隐藏元素放到.container外面，这样.container里只有可见的元素，:nth-child()就能正常按可见元素的位置计数了。

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