n -child()和eq()的区别是什么?

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

非常直接。n -child的索引为1，而eq的索引为0。n -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的表达，希望它能对我有意义吗?

第一条:

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

这意味着"查找第二个位置的所有元素，并且仅当它们同时恰好是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"是第一个div中的第二个p， "Div2p2"是第二个div中的第二个p。

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

<p>Div2p2</p>

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

相关内容

最新更新

热门标签：