如何覆蓋CSS的img標籤

的關注是我的img CSS：如何覆蓋CSS的img標籤

img { 
    border: none; 
    max-width: 100%; 
    height: auto !important 
}

在風格的底部，我重寫了具體img爲：

.locals-list>img { 
    height: 35px; 
}

這裏是我的html：

<div class="eas-footer"> 
    <div class="wrap cfx"> 
     <h6 class="know-your-city" style="text-align: center;">Supported by</h6> 
     <div class="locals-list"> 
      <a href="http://www.indonesia.travel" target="_blank"><img src="http://cdn.goasean.com/assets/content/sponsors/_normal/logo_wonderful_indonesia_2014.png" alt="{title}" data-pin-nopin="true"></a>     
     </div> 
    </div> 
</div>

現在的問題是，我的新height變化沒有采取p花邊。我仍然得到height: auto !important。謝謝！

來源

2016-04-07 d3bug3r

它的B/C'important'具有最高優先級 – Heidel

添加具有高度重要到你的.locals-list> img styles .. –

在CSS末尾添加另一個高度！重要的（height: 35px !important;）將覆蓋以前的高度。

此外，我已將.locals-list>img更改爲.locals-list img。請參閱以下代碼。

img { 
 
    border: none; 
 
    max-width: 100%; 
 
    height: auto !important; 
 
    border: 1px solid green; 
 
} 
 
.locals-list img { 
 
    height: 85px !important; 
 
}

<div class="eas-footer"> 
 
    <div class="wrap cfx"> 
 
    <h6 class="know-your-city" style="text-align: center;">Supported by</h6> 
 
    <div class="locals-list"> 
 
     <a href="http://www.indonesia.travel" target="_blank"> 
 
     <img src="http://cdn.goasean.com/assets/content/sponsors/_normal/logo_wonderful_indonesia_2014.png" alt="{title}" data-pin-nopin="true"> 
 
     </a> 
 

 

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

來源

2016-04-07 06:32:25 Pugazh

添加該屬性!important

.locals-list>img { 
    height: 35px !important; 
}

來源

2016-04-07 06:32:37

!important關鍵字優先於其他屬性值。因此，要麼從height:auto（更好的方法）中刪除!important，要麼將!important添加到height: 35px;。

在CSS中添加!important並不是一件好事。您應該只將其用於特定目的，如：

.always-hide-this-no-matter-what { 
    display: none !important; 
}

下面是關於CSS特異性的良好article。

來源

2016-04-07 06:35:32

因爲你有高度：汽車重要所以如果你想超越它，你必須使用重要的，如：！

.locals-list>img { 
    height: 35px !important; 
}

來源

2016-04-07 06:37:43

如何覆蓋CSS的img標籤

回答

相關問題