Два определения одного и того же элемента в одном классе div

Question

Мне нужно использовать элемент, в этом случае img, в том же классе div, но с разными определениями.

Пример:

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

Вы должны присвоить уникальный идентификатор и назначить CSS для отдельного идентификатора

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

Answer 2

У вас есть классы, которые можно использовать, чтобы однозначно предназначаться эти элементы. используйте .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>

Вы также можете использовать другие уникальные классы/элементы в этих 2-х блоков, как 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>