CSS :nth-child选择器无法选中目标元素的问题排查

我明白你遇到的问题了——你想隐藏每个.row容器里的第7、8个a.recirc-rail_unit元素，但之前的选择器没生效，核心原因是你忽略了.row里的<h1>标题对兄弟元素位置的影响！

问题根源 #

你的HTML结构里，每个.row的子元素顺序是：

<div class="row">
  <h1>标题</h1>
  <a class="recirc-rail_unit">...</a> <!-- 第1个a，是.row的第2个子元素 -->
  <a class="recirc-rail_unit">...</a> <!-- 第2个a，是.row的第3个子元素 -->
  ...
  <a class="recirc-rail_unit">...</a> <!-- 第7个a，是.row的第8个子元素 -->
  <a class="recirc-rail_unit">...</a> <!-- 第8个a，是.row的第9个子元素 -->
</div>

你之前用的a.recirc-rail_unit:nth-child(7)，是在找父元素的第7个子元素且是a标签，但这个位置对应的是第6个a（因为前面有1个h1占了第1位），自然达不到预期效果。

可行解决方案 #

这里有几种靠谱的写法，你可以根据需求选择：

方案1：精准匹配位置（考虑h1的存在）

直接定位.row下第8、9个子元素（也就是第7、8个a）：

.row > a.recirc-rail_unit:nth-child(8),
.row > a.recirc-rail_unit:nth-child(9) {
  display: none;
}

方案2：用:nth-of-type忽略不同类型元素

:nth-of-type会只统计同类型的元素，所以可以直接选中第7、8个a标签（自动跳过前面的h1）：

.row > a.recirc-rail_unit:nth-of-type(7),
.row > a.recirc-rail_unit:nth-of-type(8) {
  display: none;
}

这个方案更灵活，如果后续.row里新增其他类型的元素（比如p标签），只要不是a标签，就不会影响选择结果。

方案3：批量选中从第7个a开始的元素

如果确定每个.row里只有8个a，也可以用n+8来选中从第8个子元素开始的a（也就是第7、8个a）：

.row > a.recirc-rail_unit:nth-child(n+8) {
  display: none;
}

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