为什么nth-of-type不能处理包含在标签中的图像？

Question

我正在尝试使用nth-of-type函数对系列中的特定图像进行样式设置，但是当我将图像包装在标签中时，它似乎会中断。如果我只使用图像，它可以正常工作。

这是我的小提琴： http://jsfiddle.net/o87oyfrx/1/

.row2 img:nth-child(2) {
    border: 1px solid green;
} 

<div class="row2">
    <a href="http://abcnews.go.com/"><img src="http://abcnews.go.com/assets/images/navigation/abc-logo.png" /></a>
    <a href="http://abcnews.go.com/"><img src="http://abcnews.go.com/assets/images/navigation/abc-logo.png" /></a>
</div> 

Answer 1

  

为什么:nth-of-type()无法处理<a>代码中包含的图片？

会的，但由于您使用的是:nth-child()，而不是:nth-of-type()，我会解决这个问题（尽管答案几乎相同，无论如何）。< / p>

您遇到的问题是您的选择器选择了错误的元素，因为<img>中的.group3元素分别包含在<a>元素中，因此{{1无法匹配任何东西;如果您尝试img:nth-child(1)或img:first-child，您会发现两个img:nth-child(2)元素都已成功选中，因为它们同时包含<img>和{{{} 1}}在他们各自的父母中。

因此，要选择:nth-child(1)中显示的第二个:first-child元素，我们需要通过其父级选择<img>：

.group3

JS Fiddle demo

重要的是要注意<a> 正确地它告诉你的事情（以它的名字命名）;它会选择.row3 a:nth-child(2) img { border: 1px solid green; } 元素，如果它是其父级的:nth-child()。由于所有<img>元素都单独包含在:nth-child()元素中，因此这些<img>元素都不能匹配。

这意味着选择第二个<a>我们需要选择唯一的图像（或可能是所有图像），这些图像保存在<img>元素的实际第二个子元素中，这是<img>。

参考文献：

• :nth-child()。