如何组合css选择器

Question

我使用webdriver并经常使用css选择器，并想知道我写入遍历每个级别的代码量是否可以减少。 以下是访问元素的javascript代码，java中的类似代码将出现在我的代码中。

在下面的例子中，我使用了3个css选择器来遍历3个级别，我可以将它们组合在一起或至少简化。

document.querySelector('.datagrid').querySelectorAll(".even")[3].querySelectorAll('tbody tr')

Answer 1

您可以使用后代或子选择器（技术上称为“组合器”）来组合第一部分：

document.querySelectorAll('.datagrid .even')[3].querySelectorAll('tbody tr')

...但它会使浏览器比你的代码更难工作，因为代码的第一部分（ document.querySelector('.datagrid') ）会在找到第一个匹配元素时停止查看，然后再看仅限于.even元素。 上述查找所有 .even有元素.datagrid祖先。 因此可能需要搜索更多文档。 大多数时候没关系，但值得指出。 上述的组合也假设有至少四个.even在第一元件.datagrid 。 如果没有，你的代码会抛出一个错误（因为尝试在[3]上调用.querySelectorAll ，这将是null ），而上面的代码可能会抛出一个错误（如果总共没有四个）的页面），或可能是指一个.even元件在随后的.datagrid而不是第一。

[3]将它与后面的结合起来很棘手。 使用.even:nth-child(3)或.even:nth-of-type(3)是很诱人的，但这是一个错误，因为这些计数都不匹配.even然后取第三个。 nth-child只匹配都是元素.even 和他们的父母的第三个孩子元素（考虑所有元素，而不仅仅是.even那些）。 nth-of-type做同样的事情，但只考虑具有相同标签的其他元素。 如果您有其他非.even元素具有相同的标记名称，则会出错。

有时你会听到有关添加选择器（类似于jQuery提供的:eq ）的讨论来做你正在谈论的事情，但问题（据我所知）是需要对选择器引擎处理选择器的方式进行根本改变（这是从右到左）。 （还有一个问题是jQuery被广泛使用，并使用0作为第一个元素的索引，而CSS在类似的情况下使用1因此CSS必须使用除了以下之外的东西:eq - 也许:index ？ - 以避免混淆。 ）

Answer 2

几乎你可以用css选择器做任何事情，你可以使用querySelector() ，所以如果你知道你的CSS选择器，你应该没问题。

“传递给querySelector的字符串参数必须遵循CSS语法” - 从API中提取。