Wie CSS außer Kraft zu setzen Tag für img

Question

Abstimmung waren meine CSS für img:

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

Am unteren Rand des Stils, überschreiben ich die spezifische img als:

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

Hier mein html ist:

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

das Problem ist jetzt, meine neue height Änderungen nicht unter p Spitze. Ich bekomme immer noch height: auto !important. Vielen Dank!

Answer 1

Hinzufügen einer anderen Höhe mit ! Wichtig (height: 35px !important;) am Ende des CSS wird die vorherige Höhe überschreiben.

Auch ich habe .locals-list>img zu .locals-list img geändert. Siehe untenstehenden Code.

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>

Answer 2

diese Eigenschaft !important

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

Answer 3

!important Schlüsselwort hat Vorrang vor anderen Eigenschaftswerte hinzufügen. Entfernen Sie entweder !important von height:auto (besserer Weg) oder fügen Sie !important zu height: 35px; hinzu.

Hinzufügen von !important in CSS ist keine gute Sache. Sie sollten es nur wie für bestimmte Zwecke verwenden:

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

Hier ist ein gutes article auf CSS Spezifität.

Answer 4

Weil Sie Höhe: auto wichtig also, wenn Sie wollen es außer Kraft setzen müssen Sie wichtig wie mit +!

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