Question

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

以下是代码示例。

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

所以编辑徽标图片非常困难，因为它甚至没有附加一个类..

我有没有办法制作一个CSS规则，该规则仅适用于第一次调用col-md-3类，然后编辑该img。像这样：

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

我将如何做到这一点？

Answer 1

按照你的描述：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

每页上的标题。
logo.png

这些因素使我得出结论，我发布的解决方案将起作用（幸运的是，确实如此）

Answer 2

如果可能的话，你可以使用jquery：第一个选择器来添加一个类或直接的css值：

$( ".col-md-3:first" ).find( "img" ).css( "width", "171px" ).css( "padding-bottom","10px").....;

或者此徽标仅用于此地方

 $( "img[src='img/logo.png']").css( "width", "171px" ).css( "padding-bottom","10px").....;

Target First Div Image CSS

2 个答案: