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也不起作用。只是n-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与选择器匹配。

Answer 2

尝试仅使用img:nth-child(N)，其中N表示数字。

Nightwatch.js和nth-child（css）的问题

2 个答案: