html - 需要 XPATH 表达式的等效 CSS 选择器

Question

我有一个html代码如下：

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

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

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

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

Answer 1

首先，如果您正在使用id，则不需要使用类，其次，如果您愿意选择一个select_a_boundary可以使用id 的元素

#select_a_boundary {
   /* Styles goes here */
}

演示

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

---

根据你的评论

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

演示 X-Path 等效项

或者更简单的（来源：杰克）

#select_a_boundary.dataset_select2 {
    color: red;
}

注意：我仍然建议您使用#select_a_boundary绰绰有余

Answer 2

相当于您在 CSS 中的表达式是这样的：

#select_a_boundary.dataset_select2 {
    /* whatever */
}

因为单个文档中的标识符应该是唯一的，所以您甚至可以将其缩小到：

#select_a_boundary {
    /* whatever */
}

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

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

另一方面，CSS 无法匹配诸如“所有段落都有一个锚子”之类的东西，这在 XPath 中使用//p[a].