同一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元素。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

您还可以在这两个区块中使用其他唯一的类/元素，例如figure和.unlockedl

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您应该分配一个唯一ID并将css分配给不同的ID

 <div id ='id1'  class='same_class'>    </div>
 <div id='id2'  class='same_class'>     </div>


#id1 {
  width: 100%;
}

#id2 {
  max-height: 300px;
}

.same_class{
   margin: 0 0 30px;
   border: 4px solid #18a00e;
 }