html - 目标第一个 Div 图像 CSS

Question

我正在为客户修改一个设计不佳的网站。原始开发人员在每个页面中放置了相同的标题代码，这意味着编辑所有单个文件确实不是一种选择。

这是代码示例。

<div class="col-md-3 text-left">
    <a href="index.html"><img src="img/logo.png"></a>
</div>

因此很难编辑该 Logo 图像，因为它甚至没有附加类..

有没有办法让我制定一个只适用于第一次调用 col-md-3 类的 CSS 规则，然后编辑那个 img。像这样:

img.col-md-3:first{
    width:171px;
    padding-bottom:10px;
    margin:0 auto;
    display:block;
}

我该怎么做？

Answer 1

按照您的描述:

div.col-md-3:first-of-type img {
  width: 171px;
  padding-bottom: 10px;
  margin: 0 auto;
  display: block;
  /* For Testing */
  outline: 3px solid red;
}

<div class="col-md-3 text-left">
  <a href="index.html">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Intel-logo.svg/2000px-Intel-logo.svg.png">
  </a>
</div>

读者注意:虽然在@ShivamPaw 的情况下这个片段解决了问题，但请记住@disinfor 所说的如果 div.col-md-3 是在新的包含元素中找到，该容器中的图像也会在同一页面中受到影响。

在@ShivamPaw 的描述中，我通过上下文假设:

• 每页一个标题。

• logo.png

这些因素使我得出结论，我发布的解决方案将起作用(幸运的是，它起作用了)