如何使用 CSS 控制不同图像在同一个 DIV 中的位置？

【问题标题】：How do you control placement of different images inside the same DIV with CSS?如何使用 CSS 控制不同图像在同一个 DIV 中的位置？
【发布时间】：2013-05-31 16:06:26
【问题描述】：

我知道这应该很简单，但我似乎无法让它发挥作用。我有六个带有图标图像的信息框，我将它们列成一个列表。我使用 div# li img 来控制图标的位置。但在最后一个框中有一个图标 img，然后是四个小的社交媒体图标图像。我无法弄清楚如何控制社交媒体图标 img 的位置（填充），因为 div# li img 会覆盖它。

【问题讨论】：

标签： css css-selectors

【解决方案1】：

使用#grid li > img 以便仅选择属于li 的子图像。社交媒体偶像是年轻的后代。

【讨论】：

对不起，我不太明白，这对我来说是新的，那是实际的代码吗？
@user1269988 是的，> 是子选择器（子选择器是直接后代）。它将选择<li><img>，但不会选择<li><a><img>

【解决方案2】：

如果您想定位不支持> 的真正古老的浏览器，您可以使用更具体的选择器来覆盖它：

#grid li a img {
    padding: 0;
}

【讨论】：

【解决方案3】：

您仍然可以将style 属性添加到li 并可以控制图像的padding

【讨论】：