Dynamisch Spannweite über CSS ändern

Question

Ich arbeite an einer Angular-Anwendung, die einen Span-Block in einem H3-Element hat. Dieses span-Element erhält dynamisch eine Klasse green, wenn es grün wird. Ich erwartete das folgende CSS-Code zu arbeiten:

h3 span { 
    background: #d2001b; 
} 
h3 span.green { 
    background: #669900 !important; 
} 

Dies ist jedoch immer macht meine Spanne #d2001b. Was mache ich falsch?

Answer 1

Hier ist eine Vanille Javascript Beispiel und Ihre CSS scheint korrekt zu sein, Ereignis ohne die !important.

Stellen Sie sicher, dass kein anderes CSS die Hintergrundfarbe außer Kraft setzt.

span = document.querySelector('#myspan'); 

span.onclick = event => { 
    span.classList.toggle('green'); 
} 

Voll Beispiel https://codepen.io/anon/pen/Ebyxwr