更新特定 div 中子元素的 css 属性答案

【问题标题】：Update css property of a child element in specific div更新特定 div 中子元素的 css 属性
【发布时间】：2016-11-30 05:41:42
【问题描述】：

我的同一个 jsp 文件中有 2 个不同的 div 容器，我无权对其进行编辑。

--Div 1

<div class="mar-t40 alignRight">
    <img id="ts_fclogoBox" alt="Logo" src="{{imgPath}}/content/dam/Logo.png" />
</div>

--Div 2

<div class="alignRight">
    <img id="ts_fclogoBox" alt="Logo" src="{{imgPath}}/content/dam/Logo.png" />
</div>

现在我只需要将下面的 css 应用到 DIV 2 中的 ts_fclogoBox。是否可以在不编辑 jsp 文件的情况下实现它？

#ts_fclogoBox {
    margin-left: -15px;
}

我觉得不可能，只是想看看有没有办法。

【问题讨论】：

你不能对两个不同的元素使用相同的 id 如果你使用相同的 ID，那么 ID 是唯一的，只有那个 id 会受到影响，这将首先由 DOM 找到
正如前面的评论指出的那样，您不应该对同一页面中的两个元素使用相同的 ID。我还认为答案看起来过于字面，并假设第二个div 是第二个孩子，但情况并非总是如此。如果它并不总是第二个孩子，那么this demo 中使用的方法会有所帮助。如果它满足您的需求，那么我将作为答案发布。
@Harry：完美答案请将其作为答案发布。我会标记的。

【解决方案1】：

使用类和 id 避免与其他 div 混淆

div.alignRight:nth-child(2) img#ts_fclogoBox{
  margin-left:-15px;
}

【讨论】：

【解决方案2】：

您可以通过在 css3 中使用子选择器来实现这一目标

div:nth-child(2) img {
     margin-left: -15px;
}

【讨论】：