需要等效的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，则不需要使用类，其次如果您愿意选择ID为select_a_boundary的元素，则可以使用

#select_a_boundary {
   /* Styles goes here */
}

Demo

  

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

---

根据你的评论

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

Demo X-Path Equivalent

或者更简单（Credits：Jack）

#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选择器有许多相似之处，但它们是两个不同的东西。

例如，没有XPath等价于:active或:hover。使用XPath对类名进行适当匹配也比较麻烦。

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