Ändern css Stil ohne Auswirkungen auf andere Elemente

Question

Jetzt habe ich a Element, die Farbe der Schaltfläche zu blau ändern ... Das möchte ich tun, denke ich ist sehr einfach, aber ich habe nicht genug Kenntnisse über CSS.

Ich möchte eine andere Klasse tun, ohne aktuelle Klasse zu entfernen, Wie kann ich es tun?

jsFiddle

Code:

<div> 
<div class='btn btn-success'> 
<a href='javascript:Addlog(" + id + ");' role='button'> 
<i class='fa fa-pencil-square-o'></i> Complete</a> 
</div></div> 

CSS:

a, .a { 
    color: #003F8F; 
} 

a:hover, a:focus { 
    color: #23527c; 
    text-decoration: underline; 
} 

ich so etwas hinzufügen möchte:

a, .a { 
     color: white; 
    } 

    a:hover, a:focus { 
     color: white; 
     text-decoration: none; 
    } 

Aber ohne Entfernen aktuellen CSS nicht beeinflussen Code, der bereits existiert

Answer 1

Verwenden Sie eine CSS-Klasse, die Sie dynamisch aus beliebigen Elementen hinzufügen oder entfernen können.

.light { 
    color: white; 
} 

a.light:hover, 
a.light:focus { 
    color: white; 
    text-decoration: none; 
} 

JS Beispiel hat Ihr Link unter der Annahme class="color-change-button":

document.querySelector('.color-change-button').addEventListener('click', function() { 
    this.classList.toggle('light'); 
}); 

https://jsfiddle.net/DTcHh/27351/