html - 同一 div 类中同一元素的两个定义

Question

我需要在同一个 div 类中使用一个元素，在本例中为 img，但定义不同。

例子:

section .row img {
    margin: 0 0 30px;
    width: 100%;
    border: 4px solid #18a00e;
}

section .row img {
    margin: 0 0 30px;
    border: 4px solid #18a00e;
    max-height: 300px;
}

如何创建和使用这两个定义而不用最后一个覆盖前一个？谢谢。

稍后编辑(更多信息):

//this is the html code scenario 1 where I need the width: 100%//
<section class="container">
    <div class="row">
        <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
           <img src="img/m3.jpg"/>
        </figure>
    </div>
</section>

//this is the html code for scenario 2, where I need max-height: 300px//
<section class="jumbotron">
    <div class="unlockedl">
        <div class="row">
            <img src="img/pm1.jpg"/>
        </div>
    </div>
</section>

Answer 1

您拥有可用于唯一定位这些元素的类。使用 .container 和 .jumbotron 来定位那些单独部分中的 .row img 而不是通用 section 元素.

.container .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px solid #18a00e;
}

.jumbotron .row img {
  margin: 0 0 30px;
  border: 4px solid #18a00e;
  max-height: 300px;
}

<section class="container">
  <div class="row">
    <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <img src="img/m3.jpg" />
    </figure>
  </div>
</section>

<section class="jumbotron">
  <div class="unlockedl">
    <div class="row">
      <img src="img/pm1.jpg" />

    </div>
  </div>
</section>

您还可以在这两个 block 中使用其他独特的类/元素，例如 figure 和 .unlockedl

section figure img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px solid #18a00e;
}

section .unlockedl img {
  margin: 0 0 30px;
  border: 4px solid #18a00e;
  max-height: 300px;
}

<section class="container">
  <div class="row">
    <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <img src="img/m3.jpg" />
    </figure>
  </div>
</section>

<section class="jumbotron">
  <div class="unlockedl">
    <div class="row">
      <img src="img/pm1.jpg" />

    </div>
  </div>
</section>

或者您可以使用 :nth-child() 来定位各个部分

section:nth-child(1) .row img {
  margin: 0 0 30px;
  width: 100%;
  border: 4px solid #18a00e;
}

section:nth-child(2) .row img {
  margin: 0 0 30px;
  border: 4px solid #18a00e;
  max-height: 300px;
}

<section class="container">
  <div class="row">
    <figure class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
      <img src="img/m3.jpg" />
    </figure>
  </div>
</section>

<section class="jumbotron">
  <div class="unlockedl">
    <div class="row">
      <img src="img/pm1.jpg" />

    </div>
  </div>
</section>