html - 改变css样式而不影响其他元素

Question

现在我有 a 元素，可以将按钮的颜色更改为蓝色...我想做的事我认为非常简单，但我对 css 的了解不够。

我想在不删除当前类(class)的情况下进行另一门类(class)，我该怎么做？

jsFiddle

代码:

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

我想添加如下内容:

 a, .a {
        color: white;
    }

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

但不删除当前的 css 不影响已经存在的代码

Answer 1

然后使用一个 CSS 类，您可以动态地添加或删除任意元素。

.light {
    color: white;
}

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

JS 示例，假设您的链接具有 class="color-change-button":

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

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