我使用webdriver并经常使用css选择器，并想知道我写入遍历每个级别的代码量是否可以减少。以下是访问元素的javascript代码，java中的类似代码将出现在我的代码中。
在下面的示例中，我使用了3个css选择器来遍历3个级别，我可以将它们组合在一起或至少简化。
document.querySelector('.datagrid').querySelectorAll(".even")[3].querySelectorAll('tbody tr')
答案 0 :(得分：7)
您可以使用descendant或child选择器（技术上称为“组合器”）来组合第一部分：
document.querySelectorAll('.datagrid .even')[3].querySelectorAll('tbody tr')
...但它会使浏览器比代码更难工作，因为代码的第一部分（document.querySelector('.datagrid')）会在找到第一个时停止查找匹配元素，然后仅在其中查找.even个元素。以上内容查找具有.even祖先的所有 .datagrid元素。因此可能需要搜索更多文档。大多数时候没关系，但值得指出。以上还假设第一个.even中至少有四个.datagrid个元素。如果没有，您的代码会抛出错误（因为尝试在.querySelectorAll上调用[3]，这将是null），而上述代码可能< / em>抛出一个错误（如果页面上没有总共 ），或者可能引用后续.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必须使用{{1}以外的其他内容} - 也许是:eq？ - 以避免混淆。）
答案 1 :(得分：0)
使用querySelector()可以使用css选择器做的任何事情，所以如果你知道你的css选择器，你应该没问题。
“传递给querySelector的字符串参数必须遵循CSS语法” - 从API中提取。