CSS选择器p~img:nth-of-type(2n)匹配异常问题求助

核心原因：:nth-of-type 的计数逻辑 #

:nth-of-type(n) 是从父元素的所有同类型子元素里计数，不是在你用p~img筛选出的子集里计数。

你的<section>父元素下，<img>的位置顺序是：

• 第1张：image=5（在<p>之前）
• 第2张：image=6（<p>之后第1张）
• 第3张：image=7（<p>之后第2张）
• 第4张：image=8（<p>之后第3张）

当你写p~img:nth-of-type(2n)时，2n会选中父元素里所有偶数位的<img>——也就是第2张（image=6）和第4张（image=8），这和你要选的<p>之后第2张（image=7）完全不是一回事。

为什么:not(:first-of-type)没用 #

p~img本身就已经排除了父元素里的第1张<img>（image=5），因为它只选<p>之后的<img>。而你筛选出来的image=6、7、8本来就都不是父元素的第1张<img>，所以加不加:not(:first-of-type)都不会改变选中结果，相当于白加。

为什么2n+1能选中目标 #

2n+1会选中父元素里所有奇数位的<img>——第1张（被p~img排除）和第3张（image=7），最终只有image=7符合条件，正好是你要的目标。

补充：如果要基于<p>之后的子集计数 #

如果你想针对<p>之后的<img>子集来选“每隔一张”（比如子集里的第2、4、6...张），可以用以下写法（适配更多场景）：

p ~ img:nth-of-type(2n + 1) {
  border-radius: 10%;
}

这个规则在当前结构下会选中<p>之后的第2张（image=7），后续如果<p>之后新增更多<img>，也会持续选中子集里的偶数位（对应父元素的奇数位<img>）。

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