html - 如何单独定位嵌套图像？

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 上的属性(property)改为标记:

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

JsFiddle Demo