同一div類中相同項的兩個定義

我需要在同一個div類中使用一個項目，在本例中爲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>

來源

2017-02-11 Claudiu

這取決於您的標記。你也可以發佈你的標記嗎？ –

您需要添加額外/不同的選擇器來引用其中一個或另一個。這些不需要是類。但是如果沒有看到這兩個元素的HTML，就不可能推薦一個合適的解決方案。 – Alvaro

我是新來的編碼，使用bootstrap。我不知道標記是什麼。 – Claudiu

你應該分配一個唯一的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; 
}

來源

2017-02-11 21:34:51 scaisEdge

由於CSS的特殊性，使用ID的樣式可能會很麻煩。如果您要修改標記以添加不同的標識，爲什麼不添加不同的類並將其用於樣式呢？ –

@MichaelCoker正確..但ID是最有選擇性的選擇和可以幫助OP .. – scaisEdge

無論如何回答更新分組共同elemnt我same_class – scaisEdge

你有，你可以用它來唯一目標類那些元素。使用.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>

來源

2017-02-11 22:02:36

謝謝。我使用了第一個解決方案，它工作。 – Claudiu

@Claudiu真棒，不客氣:) –

同一div類中相同項的兩個定義

回答

相關問題