如何通过CSS选择器选取DOM中的第二个匹配元素？

要精准选中第二个带有[data-short-caption="itemName" i]属性的元素下的.circle-base，结合你的HTML结构，这里有几种实用的CSS选择器写法：

方法一：使用:nth-child(2)伪类（最直接） #

这个方法通过元素在父容器中的位置来定位，适合父元素.selection下的子元素都是你要匹配的[data-short-caption="itemName"]元素的场景：

.selection [data-short-caption="itemName" i]:nth-child(2) .circle-base

解释：

• .selection 定位到最外层父容器
• [data-short-caption="itemName" i]:nth-child(2) 选中父容器下的第二个子元素（刚好是第二个带目标属性的div）
• 最后加上.circle-base，就精准选中了这个元素内部的目标节点

方法二：使用:nth-of-type(2)伪类 #

如果.selection下的子元素全是<div>类型，这个写法和上面效果一致；但如果父容器里混合了其他元素（比如<p>、<span>），:nth-of-type会只统计<div>类型的元素位置：

.selection [data-short-caption="itemName" i]:nth-of-type(2) .circle-base

方法三：相邻兄弟选择器（适合只有两个目标元素的场景） #

如果确定只有两个匹配的元素，也可以用相邻兄弟选择器+来定位第二个元素：

.selection [data-short-caption="itemName" i]:first-child + [data-short-caption="itemName" i] .circle-base

解释：先选中第一个匹配的元素，再通过+选中它紧挨着的下一个同属性元素，最后定位内部的.circle-base。

注意点 #

• 选择器末尾的i是大小写不敏感标志，确保匹配itemName、ItemName等不同大小写的属性值
• 如果后续父容器的子元素结构有变化（比如插入了其他元素），:nth-child的计数会受影响，这时候可以考虑给目标元素增加额外的类名来简化选择器，不过基于现有结构，上面的写法已经足够可靠。

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