1

有很多类似的问题，但是我无法找到答案。

假设你有一个这样的 HTML 页面：

<!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>页面上的第二个元素，它是其 parent 的第一个子元素。在这种情况下，它是 element <td>D</td>。

请注意，此措辞应保持不变，例如，它与选择第二个<tr>然后选择其第一个子级（导致相同的元素）不同，因为我正在使用的原始页面比这个最小的测试用例复杂得多，并且这种方法在那里行不通。

到目前为止我做了什么：

一个CSS 选择器 #content td:first-child找到了我A，D现在我可以通过 JS ( document.querySelectorAll("query")[1]) 或在 Java 中选择第二个元素（最后我正在使用这些元素）。但是，使用附加代码来完成可以通过选择器完成的工作是非常不一致的。

同样，我可以使用XPath 表达式：id('content')//td[1]。它相当于上面的 CSS 选择器。它返回一个节点集，所以我认为这id('content')//td[1][2]会按我想要的方式工作，但没有运气。

一段时间后，我发现我( id('content')//td[1] )[2]正在按照我想要的方式工作，所以我就这么做了，并且对此感到非常满意。

尽管如此，我还是很失望地看到我无法执行单个查询来获取我的元素，因此存在一个学术问题：是否有任何其他解决方案，无论是使用 CSS 选择器，还是使用 XPath 表达式我的查询？我错过了什么？可以做到吗？

4

2 回答 2

2

CSS 选择器目前不提供任何方法来选择一组全局匹配元素中的第 n 个元素或整个 DOM 中某个元素的第 n 个出现。选择器 3和选择器 4提供的结构:nth-*()功能伪类都按其父级匹配条件的第 n 个子级计算，而不是按整个 DOM 中的第 n 个元素计算。

当前的 Selectors 语法没有提供一种直观的方式来表示“这是 DOM 中一组匹配元素中的第 n 个”；即使在 Selectors 4 中:nth-match()，:nth-last-match()它们目前的语法也很尴尬。所以这确实令人失望。

至于 XPath，要使用的表达式是(id('content')//td[1])[2]，正如您已经找到的那样。外部()只是意味着“整个子表达式应该在[2]谓词之前进行评估”或“[2]谓词应该对整个子表达式的结果进行操作，而不仅仅是//td[1].”。没有它们，表达式td[1][2]将被集体处理，两个相互冲突的谓词永远不会一起工作（你不能让相同的元素同时成为第一个和第二个！）。

在子表达式周围加上括号并不会使它本身成为一个额外的查询；如果是这样，那么您可以考虑每个id('content'),和一个“查询”本身，并带有//td隐含的（或可选的）括号。这是很多查询:)[1][2]

于 2013-01-18T15:02:52.057 回答
1

使用这个简单的 XPath 表达式：

(//td[1])[2]

基于 XSLT 的验证：

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
 <xsl:output omit-xml-declaration="yes" indent="yes"/>

 <xsl:template match="node()|@*">
     <xsl:copy-of select="(//td[1])[2]"/>
 </xsl:template>
</xsl:stylesheet>

当此转换应用于提供的 XML 文档时：

<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>

对 XPath 表达式求值，并将该求值的结果复制到输出中：

<td>D</td>
于 2013-01-18T19:40:34.520 回答