CSS-Klasse mit! Wichtig wird nicht angewendet?

Question

Ich habe dieses HTML:

.text-success { 
 
    width: 75px; 
 
    padding: 1px; 
 
    color: #4c9709; 
 
} 
 

 
.SomethingOrOther { 
 
    padding: 0px 0px 0px 37px !important; 
 
    color: #FFA500 !important;  
 
} 
 

 
.lineheight { 
 
    line-height: 21px !important; 
 
}

<b><span id="lblSomethingOrOther" class="text-success lineheight SomethingOrOther"><a onclick="SomeAction('Something', 'Other');"><u>Text which appears incorrectly</u></a></span></b>

In der text-success Klasse, wenden wir ein paar Dinge, aber einer von ihnen ist color: #4c9709; (grün). Die SomethingOrOther Klasse gilt auch color: #FFA500 !important; (orange), aber wenn ich die Software ausführen, hat der Text die falsche Farbe; es ist text-success 's grün.

Warum respektiert es nicht die !important Flagge und die Verwendung der zweiten Farbe? Versuchte IE, Chrome und Firefox.

Ich kann wahrscheinlich entfernen Sie die text-success Klasse aus dem HTML aber dies ist korrekt auf unserem Live-Server verhalten, aber nicht unsere lokalen Test-Server, und ich versuche, warum ...

Answer 1

Das Problem scheint mit dem Spezifitätswert zu liegen. Je spezifischer Sie mit CSS sind, desto höher ist es in der Hierarchie. Z.B.

eine Klasse ist weniger spezifisch als eine ID, so dass die ID alle Überschreibungen gewinnt Inline-Stile sind spezifischer als eine ID, so dass Stile gewinnen.

Die! Wichtige Regel kann vorhanden sein, funktioniert aber aufgrund der Spezifität der CSS nicht. Das Hinzufügen der Elementtyp vor der Klasse sollte die Spezifität Sieg über andere Regeln machen

Beispiel CSS (anders als Inline wichtig!):

.class {color: #fff;} 
#id {color: #000;} /*id will win*/ 

span.class {color: #fff;} 
#id {color: #000;} /*id will lose because span.class narrows down selectors moreso than #id*/ 

Answer 2

dieses Codes Versuchen Sie herauszufinden, es funktioniert. Sie können es sehen here.

<span id="lblSomethingOrOther" class=" lineheight SomethingOrOther"> 
<span >this is blue.</span> 
<a onclick="SomeAction('Something', 'Other');"><u class="text-success">this is green.</u> 
</a> 
</span> 

Css:

.SomethingOrOther { 
    padding: 0px 0px 0px 37px !important; 
    color: blue !important;  
} 
.text-success { 
    width: 75px; 
    padding: 1px; 
    color: green ; 
} 
.lineheight { 
    line-height: 21px !important; 
} 

Sie haben zu verwenden, wichtige CSS attr auf die Eltern und andere css attr auf Childes oder Knoten der Eltern!.