选择页面上的第x个元素，该元素是父元素的第y个子元素 [英] Select the xth element on a page that is a yth child of its parent
问题描述
有很多类似的问题，但我无法找到答案。
There are lots of similar questions, however I wasn't able to find an answer to this.
想象一下，你有一个HTML页面：
Imagine you have a HTML page like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
<div id="content">
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
</table>
</div>
</body>
</html>
，并且您想要选择第二个< td> / code>页面上的父元素的第一个子元素。在这种情况下，它是元素< td> D< / td> 。
and you want to select the second <td> element on the page that is a first child of its parent. In this case, it's the element <td>D</td>.
例如它不同于选择第二个< tr> ，然后它的第一个孩子（导致同一个元素），因为原始页面I'
Note that this wording should be kept intact, for example it's not the same as selecting the second <tr> and then its first child (results in the same element), because the original page I'm working with is far more complex than this minimal testcase and this approach wouldn't work there.
到目前为止我做了什么：
What I have done so far:
A CSS选择器 #content td：first-child 查找我 A 和 D ，现在我可以选择第二个元素通过JS（ document.querySelectorAll（query）[1] / code>）或在Java中（我在使用这些元素到底）。
A CSS selector #content td:first-child finds me A and D, now I am able to select the second element either via JS (document.querySelectorAll("query")[1]) or in Java (where I'm working with those elements in the end). However, it's quite inconsistent to use additional code for what could be done via a selector.
同样，我可以使用 XPath表达式：
过了一段时间，我发现了（id（'content'）// td [1]）[2]
After some time, I discovered ( id('content')//td[1] )[2] to be working the way I want so I went for that and am quite happy with it.
仍然，这是一个我知道我不能做一个单一的查询来获取我的元素，因此一个学术问题到位：是否有任何其他解决方案，使用CSS选择器或XPath表达式来执行我的查询？我错过了什么？
Still, it's a letdown for me to see that I couldn't do a single query to get my element, and therefore an academic question is in place: Is there any other solution, either with a CSS selector, or an XPath expression to do my query? What did I miss? Can it be done?
推荐答案
CSS选择器目前没有提供任何方法来选择一组全局 - 匹配元素或整个DOM中某个元素的第n次出现。由：nth - *（） rel =nofollow>选择器3 和选择器4 全部由第n个计数
CSS selectors currently don't provide any way to select the nth element in a set of globally-matched elements or the nth occurrence of some element in the entire DOM. The structural :nth-*() functional pseudo-classes that are provided by both Selectors 3 and Selectors 4 all count by the nth child of its parent matching the criteria, rather than by the nth element in the entire DOM.
目前的Selectors语法并没有提供一个直观的方式来说明this is DOM中的一组匹配元素的第n个;甚至在选择器4中的：nth-match（）和：nth-last-match（）因为他们目前站在。
The current Selectors syntax doesn't provide an intuitive way to say "this is the nth of a set of matched elements in the DOM"; even :nth-match() and :nth-last-match() in Selectors 4 have a pretty awkward syntax as they currently stand. So that is indeed a letdown.
对于XPath，要使用的表达式是（id（'content'）// td [1] ）[2] ，正如你已经发现的。外部（）只是意味着整个子表达式应在 [2] 谓词 code> [2] 谓词应该对整个子表达式的结果进行操作，而不仅仅是 // td [1] 。没有它们，表达式 td [1] [2] 将被集体对待，有两个冲突的谓词，永远不能一起工作（你不能有同样的元素两者第一个和第二个！）。
As for XPath, the expression to use is (id('content')//td[1])[2], as you have already found. The outer () simply means "this entire subexpression should be evaluated before the [2] predicate" or "the [2] predicate should operate on the result of this entire subexpression, not just //td[1]." Without them, the expression td[1][2] would be treated collectively, with two conflicting predicates that would never work together (you can't have the same element be both first and second!).
在子表达式周围括号不会使其成为额外的查询本身;如果是，那么你可以考虑每个 id（'content'）， // td ， [1] 和 [2] 一个查询 （或可选）括号。这是很多查询：）
Having parentheses around a subexpression doesn't make it an extra query per se; if it were, then you could consider each of id('content'), //td, [1] and [2] a "query" as well in its own right, with implied (or optional) parentheses. And that's a lot of queries :)
这篇关于选择页面上的第x个元素，该元素是父元素的第y个子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
