Erzwingen Sie eine Div-Klasse eine andere CSS-Klasse mit jQuery trotz doppelter Namen zu verwenden?

Question

Ich versuche, eine Klasse anders als andere (mit dem gleichen Klassennamen) zu stylen, basierend darauf, ob sie einen bestimmten Text enthält oder nicht. Ich habe es geschafft, Class hinzuzufügen, aber das Problem, dem ich jetzt gegenüberstehe, ist die Master-CSS-Klasse, die es überschreibt. Code zu erhalten:

HTML

<div id="master"> 
    <div> 
     <div class="attributes"> 
      <a href="#">Not important</a> 
     </div> 
    </div> 
    <div> 
     <div class="attributes"> 
      <a href="#">Not important</a> 
     </div> 
    </div> 
    <div> 
     <div class="attributes"> 
      <a href="#">Important Text and Other Stuff</a> 
     </div> 
    </div> 
    <div> 
     <div class="attributes"> 
      <a href="#">Not important</a> 
     </div> 
    </div> 
    </div> 

Original-CSS

#master div.attributes { 
    float: left; 
    font-size: 12px; 
    margin-top: 0px !important; 
    width: 330px; 
    clear: both; 
} 

.attributes { 
    color: #58585a !important; 
    font-size: 14px; 
    margin: -10px 0 0 !important; 
} 

jQuery verwendet

$('div.attributes:contains("Important Text")').addClass('attributes2'); 

CSS Hinzugefügt

.attributes2 

{ 
    clear: none; 
    float: right; 
    font-size: 12px; 
    margin-top: 0; 
    width: 330px; 
} 

So erfolgreich hinzugefügt .attributes2 und nutzt sie, aber die #master div.attributes CSS-Klasse ist dies overruling. Kann jemand daran denken? Ich habe unzählige Google & Stack-Suchen, kein Glück ... Ich sollte erwähnen, ich habe nicht die Möglichkeit, die HTML-ID & Klassennamen zu bearbeiten. Aber ich kann die css & jQuery bearbeiten.

Vielen Dank.

Answer 1

Sie müssen bei CSS aussehen specificity

Spezifität ist das Mittel, mit dem Browser sind die CSS-Eigenschaft Werte entscheiden, die am besten zu einem Element und daher wird angewendet. Spezifität basiert auf den Übereinstimmungsregeln, die von verschiedenen Arten von CSS-Selektoren zusammengesetzt sind.

Take a look here for more information

Sie haben eine spezifischere CSS-Selektor hinzuzufügen.

Fügen Sie die folgenden CSS

#master div div.attributes2{ 
    clear: none; 
    float: right; 
    font-size: 12px; 
    margin-top: 0; 
    width: 330px; 
} 

HINWEIS:

Wenn Spezifität gleich einem der mehreren Erklärungen ist, die zuletzt in der CSS gefunden Erklärung an das Element angelegt wird.

Answer 2

Dies passiert, weil die ID #master eine höhere Priorität als die Klasse .attributes2 hat, es hat mehr specificity. Also, um dieses Problem zu beheben, können Sie einfach mehr Spezifität zu Ihrem .attributes2 Block hinzu:

#master div.attributes2 { 
... 
} 

Bitte beachten Sie auch, dass Sie mit Ihrem .attributes Block das gleiche tun sollen stattdessen die !important Regel verwenden, da die !important Regel der Interrupts Cascading Natur von CSS und erstellt schwieriger Code zu pflegen.