如何将指定XPath表达式转换为等效的CSS选择器？

完全等价实现（需环境支持:has()伪类） #

现代浏览器、新版本的爬虫/自动化测试工具基本都已支持:has()伪类，以下选择器和原XPath逻辑完全一致：

div.item-row.centerVertical:has(input[title="11"]) bs-check-box-combo-box div ul.dropdown-menu.dropdown-list.dropdown-menu-right.show li a span.useEllipses

逻辑对应说明： #

• div.item-row.centerVertical:has(input[title="11"])：对应原XPath中「查找所有title属性为11的input元素，再向上找其祖先节点中class为item-row centerVertical的div元素」的逻辑，:has()伪类用于匹配包含指定后代的元素
• 后续用空格分隔的选择器对应原XPath的//child::后代查找逻辑，依次匹配该div后代下的bs-check-box-combo-box元素、div元素、指定类的ul元素、li元素、a元素，最终匹配到class为useEllipses的span元素

兼容旧环境实现（不支持:has()） #

CSS原生未提供向上查找祖先元素的能力，因此在不支持:has()的环境下无法实现和原XPath逻辑完全一致的选择器。你可以结合实际DOM结构调整查询逻辑，比如如果确认DOM结构中input[title="11"]一定嵌套在div.item-row.centerVertical内部，且目标span的层级关系固定，也可以根据实际层级顺序编写选择器，等价性需要结合实际DOM结构校验。

注意：上述类名连写的写法（如.item-row.centerVertical）是匹配同时包含这些类的元素，允许存在其他额外类、类顺序和原属性值不同。如果需要完全和原XPath的@class="属性值"完全匹配的逻辑一致（要求class属性值完全相等，不能有额外类、顺序也必须一致），可以替换为属性完全匹配写法，例如：

• 把div.item-row.centerVertical替换为div[class="item-row centerVertical"]
• 把ul.dropdown-menu.dropdown-list.dropdown-menu-right.show替换为ul[class="dropdown-menu dropdown-list dropdown-menu-right show"]
• 把span.useEllipses替换为span[class="useEllipses"]

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