需要 XPATH 表达式的等效 CSS 选择器答案

【问题标题】：Need equivalent CSS Selectors of an XPATH expression需要 XPATH 表达式的等效 CSS 选择器
【发布时间】：2013-07-23 15:00:50
【问题描述】：

我有一个html代码如下：

 <div id="select_a_boundary" class="dataset_select2">Homes name</div>

我为此写了一个 xpath 表达式：

 //div[@id = 'select_a_boundary' and @class = 'dataset_select2']

相同的等效 CSS 选择器是什么？

【问题讨论】：

【解决方案1】：

你在 CSS 中的表达方式是这样的：

#select_a_boundary.dataset_select2 {
    /* whatever */
}

由于单个文档中的标识符应该是唯一的，因此您甚至可以将其范围缩小到：

#select_a_boundary {
    /* whatever */
}

需要意识到的重要一点是，尽管 XPath 和 CSS 选择器有很多相似之处，但它们是两个不同的东西。

例如，没有与 :active 或 :hover 等效的 XPath。使用 XPath 按类名正确匹配也比较麻烦。

另一方面，CSS 无法匹配诸如“所有段落都有一个锚子”之类的内容，这在 XPath 中使用 //p[a] 是微不足道的。

【讨论】：

【解决方案2】：

首先如果你使用id，你不需要使用class，其次如果你愿意选择一个id为select_a_boundary的元素，你可以使用

#select_a_boundary {
   /* Styles goes here */
}

注意：我没有选择具有该 id 和该类的元素在这里， id 就足够了，因为它必须是唯一的，如果您使用的是 id 对于多个元素无效

根据您的评论

div[id=select_a_boundary][class=dataset_select2] {
    color: red;
}

或者更简单的一个（来源：Jack）

#select_a_boundary.dataset_select2 {
    color: red;
}

注意：我仍然建议您使用#select_a_boundary 更多够了

【讨论】：

那么#select_a_boundary.dataset_select2 和div[id=select_a_boundary][class=dataset_select2] 是否等同于and？
@Priti 只使用 1 个中的任何一个
我明白了.. 我只是告诉它是在 CSS 选择器中进行and 操作的方法.. :)
@Priti 说你可以像这样打破它div having [id=select_a_boundary] and [class=dataset_select2] ;)
我用过这个——div[id=select_a_boundary][class=dataset_select2]。我使用xpath 编写了一个脚本，但我的老板告诉我使用CSS 来完成它:(.. 我不确定.. 所以我在这里寻求帮助.. :) 谢谢你的帮助..