1

我已经阅读了这个问题及其答案，并希望更进一步。

我想使用CasperJS.click(selector)函数单击与选择器匹配的多个链接。请注意，链接没有重要的href标签。

考虑以下标记：

HTML：

<div>
    <h1 class='myLink'>Cocacola</h1>
    <div>
        <div>
            <h1 class='myLink'>Sprite</h1>
        </div>
    </div>
</div>

我在上面提到的答案建议删除链接，以便我们可以单击其余元素，casper.exists依此类推。如果我不想操作页面怎么办？

由于我无法想象的原因，使用：

document.querySelector("div .myLink:nth-of-type(1)");

抓住第一h1，可口可乐。但：

document.querySelector("div .myLink:nth-of-type(2)");

返回null。

在这里拉小提琴。

有任何想法吗？非常感谢！

4

2 回答 2

3

:nth-of-type 的CSS 规范说：

:nth-of-type(an+b) 伪类表示法表示一个元素在文档树中具有 an+b-1 个兄弟元素，在它之前具有相同的扩展元素名称，对于 n 的任何零或正整数值，并且有一个父元素。

也就是说，元素必须是兄弟元素。

例如，

<div>
  <h1 class='myLink'>Cocacola</h1>
  <h1 class='myLink'>Miranda</h1>
  <div>
    <div>
      <h1 class='myLink'>Sprite</h1>
    </div>
  </div>
</div>

选择器div .myLink:nth-of-type(2)将选择米兰达。也就是说，给定 n 个类型为 'div .myLink' 的兄弟，选择器将从它们中选择第二个元素。

这是上面示例的小提琴。

希望这可以帮助！

于 2014-08-03T09:27:27.383 回答
2

如前所述，原因:nth-of-type(1)有效但:nth-of-type(2)无效，因为每种类型只有一个h1作为其 parent 的子项div。类选择器.myLink完全是一个单独的条件，不会影响:nth-of-type()工作方式。

您的第一条语句似乎返回第一个元素的原因，即使从技术上讲有两个元素匹配:nth-of-type(1)，是因为querySelector()只返回第一个匹配。

要获取与选择器匹配的第一个和第二个元素，请使用querySelectorAll()代替querySelector()，并使用索引器代替:nth-of-type()伪类：

var cocacola = document.querySelectorAll("div .myLink")[0];
var sprite = document.querySelectorAll("div .myLink")[1];
于 2014-08-03T12:58:16.870 回答