如何单独定位嵌套图像？

Question

我尝试使用CSS在页面上按时间顺序设置一组随机图像，而不使用任何html类（old demo）。

由于该部分中的所有图片都是链接，因此我在<a>标记周围包裹了</a> ... img，但现在css选择已被破坏！

我尝试了各种选择器，但所有选择器都已损坏（未选中，未应用正确的背景颜色）：

sponsor img:nth-child(1)
sponsor img:nth-of-type(1)
sponsor a img:nth-child(1)
a img:nth-child(1)

JSFIDDLE Demo按时间顺序选择的破碎者。我忽略了什么？谢谢！

Answer 1

通过将图片包装在<a> ... </a>标记中，img:nth-child(1)无效。您应该使用:nth-child标记上的a属性：

sponsor a:nth-child(1) img{width:100%; background: Fuchsia}
sponsor a:nth-child(2) img{width: 49%; background: YellowGreen}
...

JsFiddle Demo

Answer 2

nth-child()伪类定位同一父母的所有子女。

由于img元素是sponsor的子元素，nth-child()工作。

但是当你将每个img包裹在一个锚元素中时，他们就成了a的孩子而不再是sponsor的孩子。因此，nth-child()失败。

现在每个img作为a的第一个，最后一个和唯一的孩子存在，使用nth-child()定位他们是毫无意义的。

要修复布局，nth-child()需要定位sponsor的新子项 - 锚点。

而不是：

sponsor img:nth-child(2)

试试这个：

sponsor > a:nth-child(2) > img