css - Nightwatch.js 和 nth-child (css) 的问题

Question

我的代码中包含以下几个元素。

<img src="/images/myImage.jpg" alt="myImage">

它们只是在页面的正文中。使用 img[src='/images/myImage.jpg']:nth-child(1)获取这些元素中的第一个。但是为什么我不能使用 img[src='/images/myImage.jpg']:nth-child(2)定位第二个元素？ 3,4 或 5 也不起作用。只有第 nth-child(1) 正在工作。

有什么想法吗？

Answer 1

如果您将其他 HTML 元素与 <img> 混合在一起您需要使用的标签 :nth-of-type .如:

img[src='/images/myImage.jpg']:nth-of-type(2)

不过有一个问题，向下滚动到演示以阅读更多内容。

演示

img[src='http://placehold.it/200x40']:nth-of-type(3) {
  border: 5px solid black;
}

<img src="http://placehold.it/200x40" alt="test">
<div></div>
<img src="http://placehold.it/200x40" alt="test">
<div></div>
<img src="http://placehold.it/200x40" alt="test">
<div></div>
<img src="http://placehold.it/200x40" alt="test">
<div></div>
<img src="http://placehold.it/200x40" alt="test">
<div></div>
<img src="http://placehold.it/200x40" alt="test">
<div></div>
<img src="http://placehold.it/200x40" alt="test">

注意
牢记:nth-of-type和 :nth-child是伪类，只能应用于元素，不能应用于属性或类。这意味着 img[src='myImage.jpg']:nth-of-type(4)将选择第 4 个 img元素，但前提是它有 src匹配myImage.jpg .这是一个例子。

<img src="http://placehold.it/100x20" alt="test">
<img src="http://placehold.it/100x20" alt="test">
<img src="http://placehold.it/100x20" alt="test">
<img src="http://placehold.it/200x40" alt="test">
<img src="http://placehold.it/100x20" alt="test">

img[src='http://placehold.it/200x20']:nth-of-type(4)

这不会导致任何样式更改，因为第 4 个 img没有 src匹配 CSS 选择器中的属性。然而:

img[src='http://placehold.it/200x20']:nth-of-type(5) 

将样式应用于第 5 个 img自第 5 张图片的 src匹配选择器。