CSS :nth-of-type(n)的XPath等效写法及首类型节点选择方法咨询

嘿，我来帮你搞定这个CSS伪类转XPath的问题！针对你给出的HTML结构和需求，我会一步步拆解清楚。

首先，先明确CSS :nth-of-type(n) 的核心逻辑：它选择父元素下第n个同标签类型的直接子元素，不管中间穿插了其他标签。那对应的XPath怎么模拟这个行为呢？

1. 单个标签的:nth-of-type(1) 等效XPath #

如果要单独选某类标签的第一个实例（比如你的<b>、<c>、第一个<d>），可以用两种写法：

写法一：基于兄弟节点判断 #

这种写法最贴近CSS的逻辑，判断当前元素没有同标签的前置兄弟节点：

• 选中第一个<b>：//b[not(preceding-sibling::b)]
• 选中第一个<c>：//c[not(preceding-sibling::c)]
• 选中第一个<d>：//d[not(preceding-sibling::d)]

写法二：基于位置（限单一场景） #

如果你的文档中该标签只有一个父元素下的实例，也可以简化为：

• 第一个<b>：//a/b[1]（指定父元素<a>下的第一个<b>）
• 第一个<c>：//b/c[1]（指定父元素<b>下的第一个<c>）
• 第一个<d>：//a/d[1]（指定父元素<a>下的第一个<d>）

2. 一次性选中所有类型的第一个节点 #

如果你想批量选中所有父元素下每种标签的第一个子元素（正好匹配你要的<b>、<c>、第一个<d>），可以用这个通用XPath：

//*[not(preceding-sibling::*[local-name()=local-name(current())])]

这个XPath的工作原理： #

• local-name(current())：获取当前元素的标签名（比如<b>就返回b）
• preceding-sibling::*[local-name()=local-name(current())]：查找当前元素前面、标签名相同的兄弟节点
• not(...)：表示不存在这样的前置兄弟，说明当前元素是父元素下该标签的第一个子元素

把它用到你的HTML结构上，正好会选中你预期的三个节点：<b>1 <c>1</c> </b>、<c>1</c>、<d>1</d>。

3. 扩展：n大于1的情况 #

如果是nth-of-type(n)（n>1），比如要选第二个<d>，对应的XPath就是：

//d[count(preceding-sibling::d) = 1]

逻辑是：当前<d>前面有1个同标签的兄弟节点，所以是父元素下的第2个<d>。

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