4

我浏览了链接Difference between nth-child() and eq()。其中说 -

这是非常直接的。nth-child 为 1 索引，而 eq 为 0 索引。nth-child 基于当前元素的父元素，而 .eq 基于当前元素相对于选定元素的索引。它们是两种完全不同的方法，具有两种完全不同的目的。

现在为了得到正确的东西，我写了下面的代码：

doc =  Nokogiri::HTML::Document.parse(<<-eohtml)
<html>
<head>
<style>
div { float:left; }
span { color:blue; }
</style>
</head>
<body>
<div>
      <p>div1 p1</p>
      <p>div1 p2</p>
      <p>div1 p3</p>
      <p>div1 p4</p>
</div>
<div>
      <p>div2 p1</p>
      <p>div2 p2</p>
      <p>div2 p3</p>
      <p>div2 p4</p>
</div>
</body>
</html>
eohtml

p doc.css("div p:eq(2)").map { |e| e.text }
p doc.css("div p:nth-child(2)").map { |e| e.text }
# >> ["div1 p2", "div2 p2"] Expected ["div1 p3", "div2 p3"]
# >> ["div1 p2", "div2 p2"]

任何人都可以帮助我了解我做错了什么吗？实际上，有了这个输出，我不明白这两个 css 选择器之间的区别。

编辑

我不擅长XPATH概念。我试图将其转换CSS rules为XPATH如下：

Nokogiri::CSS.xpath_for("div p:eq(2)")
Nokogiri::CSS.xpath_for("div p:nth-child(2)")
# >> ["//div//p[position() = 2]"]
# >> ["//div//*[position() = 2 and self::p]"]

任何人都可以通过解释这个xpath表达来帮助我，希望它对我有意义吗？

4

1 回答 1

9

第一个：

Nokogiri::CSS.xpath_for("div p:eq(2)")
# >> ["//div//p[position() = 2]"]

这也被称为//div//p[2]，它的意思是“返回第二个p元素”，无论它们是否有其他兄弟元素。

第二个：

Nokogiri::CSS.xpath_for("div p:nth-child(2)")
# >> ["//div//*[position() = 2 and self::p]"]

这意味着“找到第二个位置的所有元素，并且仅当它们也恰好是 a时才返回它们p。

例子

考虑以下 HTML：

<html>
<body>
    <div>
        <p>Div1p1</p>
        <i>Div1i1</i>
        <p>Div1p2</p>
    </div>
    <div>
        <p>Div2p1</p>
        <p>Div2p2</p>
        <p>Div2p3</p>
    </div>
</body>
</html>

的输出//p[2]将是：

<p>Div1p2</p>
<p>Div2p2</p>

因为“Div1p2”是第p一个中的第二个div，而“Div2p2”是第二个p中的第二个div。

的输出//*[position()=2 and self::p]将是：

<p>Div2p2</p>

因为第一个 div 的第二个元素是 a i，而不是 a p。但是第二个 div 的第二个元素也恰好是 ap所以它匹配。

于 2013-06-02T01:43:36.357 回答