为何nth-child无法与前置选择器配合？如何修复？

我编写了如下HTML与CSS代码，原本期望:nth-child(n+2):nth-child(-n+3)能选中“Test2”和“Test3”——因为前置的:has(> div[role='article'])选择器已过滤掉“Nothing”元素。但实际测试发现：

• 移除:nth-child相关选择器时，可正确选中Test1、Test2、Test3、Test4（排除Nothing）；
• 移除:has(> div[role='article'])时，可正确选中“Test1”和“Test2”。

请问为何nth-child无法与前置选择器协同工作？该如何修复？

代码示例 #

CSS #

.container[role='feed'] > div:has(> div[role='article']):nth-child(n+2):nth-child(-n+3) {
  background: green;
}

HTML #

<div class="container" role="feed">
  <div>
    <div role="nothing">
        Nothing
    </div>
  </div>
  
  <div>
    <div role="article">
      Test1
    </div>
  </div>
  
  <div>
    <div role="article">
      Test2
    </div>
  </div>
  
  <div>
    <div role="article">
      Test3
    </div>
  </div>
  
  <div>
    <div role="article">
      Test4
    </div>
  </div>
</div>

原因分析 #

核心问题在于**:nth-child的计数逻辑是基于父元素下所有直接子元素的位置，而非经过前置选择器过滤后的元素集合**。

换句话说，不管:has(> div[role='article'])过滤掉了多少元素，:nth-child(n+2)依然指父元素下第2、3、4...个直接子元素，:nth-child(-n+3)指父元素下第1、2、3个直接子元素。两者结合后，选中的是父元素的第2、3个直接子元素——也就是HTML里的Test1和Test2，而非你期望的过滤后的Test2和Test3。

修复方法 #

方法1：调整:nth-child的计数（兼容旧浏览器） #

先明确符合:has(> div[role='article'])的元素是父元素的第2、3、4、5个直接子元素。要选其中的第2、3个（即Test2和Test3），直接对应父元素的第3、4个直接子元素，修改CSS选择器即可：

.container[role='feed'] > div:has(> div[role='article']):nth-child(n+3):nth-child(-n+4) {
  background: green;
}

方法2：使用:nth-child(An+B of <selector>)语法（现代浏览器支持） #

这是CSS Selectors Level 4新增的语法，可直接针对过滤后的元素集合计数，写法更直观：

.container[role='feed'] > div:nth-child(n+2 of :has(> div[role='article'])):nth-child(-n+3 of :has(> div[role='article'])) {
  background: green;
}

或者简化为更清晰的写法：

.container[role='feed'] > div:has(> div[role='article']):nth-child(2 of :has(> div[role='article'])),
.container[role='feed'] > div:has(> div[role='article']):nth-child(3 of :has(> div[role='article'])) {
  background: green;
}

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