如何使用纯CSS选择器按索引选取SVG中的指定Path元素

首先得明确：CSS里的:nth-child和:nth-of-type都是以元素的直接父元素为范围计数的，这就是为什么你用path:nth-child(1)会选中3个元素——它匹配了每个父容器里的第一个<path>，而不是整个SVG里的第一个<path>。

针对你的SVG结构，要精准选中<mask>标签下的第一个<path>，可以用层级精准定位的选择器，因为你的SVG结构是固定的（外部导入无法修改），这种方法完全可靠：

解决方案代码 #

/* 精准定位mask下的第一个path（你的目标元素） */
svg > defs > mask > path:first-child

如果担心<mask>下可能先出现其他非<path>元素，也可以用:first-of-type来确保选中mask下的第一个<path>：

svg > defs > mask > path:first-of-type

扩展说明 #

如果之后需要选中整个SVG里的其他第n个<path>，比如第5个（也就是<mask>内<g>里的第4个<path>），同样可以通过层级定位来实现：

svg > defs > mask > g > path:nth-child(4)

遗憾的是，CSS目前没有原生的“跨父容器全局计数”选择器，没法直接写类似path:nth-global(1)这样的规则，但利用固定的DOM结构做层级匹配，完全可以满足你的需求，而且是纯CSS的解决方案。

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