如何单独定位嵌套图像？答案

【问题标题】：How to individually target nested images?如何单独定位嵌套图像？
【发布时间】：2017-07-19 03:00:55
【问题描述】：

我正在尝试根据页面上的时间顺序设置一组随机图像的样式，仅使用 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 损坏的时间选择器。我忽略了什么？谢谢！

【问题讨论】：

您只需将 img: 替换为 a:.. 并在 nth-child() 之后添加 img
img 现在是您的主播的直接子代，而不是sponsor，只有一个子代，将每个主播视为img:nth-child(1)。所以如果n !== 1，img:nth-child(n) 将不起作用。您需要做的是更改您的选择器，如@Garric15 在下面的答案中建议。

【解决方案1】：

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

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

【讨论】：

【解决方案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

【讨论】：

感谢@Michael_B 的精彩解释 +1 非常清楚
@Garric15，还有没有办法对儿童 [1]、[2-3]、[4-5] 和 [6-9] 的样式进行分组？换句话说，选择器nth-child(1){}、nth-child(2-3){}、nth-child(4-5)、nth-child(6-9) 的分组（或者我应该将此作为一个单独的问题提出吗？）
山姆，不客气。很高兴我能提供帮助。关于您在上面评论中的问题，它有点牵扯，所以您可能想发布一个新问题。另外，请在此处查看我的答案以获取指导。 stackoverflow.com/a/45038349/3597276
太棒了！我将发布一个关于分组的单独问题。现在还有最后一个问题：考虑element > a:nth-child(1) > img（你的答案）和element a:nth-child(1) img（另一个答案）有什么区别？
我只在定位子元素之外的元素时使用后代组合器。这就是它的用途。我的目标是“后代”……我总是在针对孩子时尝试使用子组合器。这就是它的设计目的：仅针对儿童。 CSS 提供了多种定位元素的方法。我倾向于坚持“预期目的”的原则。对我来说，这实际上并不是性能问题，而是更多地努力使用最佳可用方法并编写干净的代码。