颜色不适用于活动按钮

我试图在按下按钮时将 css 字体颜色更改为白色，但是目前我可以执行此操作的唯一方法是使用 !important 并强制更改颜色。有没有办法在不使用 !important 的情况下做到这一点？这是我的代码：

目前，按钮字体颜色更改为 .modal-close 的背景颜色，除非我使用 !important 强制其更改为白色。有什么方法可以在不使用 !important 的情况下使其正常工作吗？任何帮助，将不胜感激。

.modal-close {
    width: 30px;
    height: 30px;
    border-radius:30px;
    border: 1px solid $gray-light;
    font-size: 14px;
    font-weight: 200;
}
.modal-close-x {
    position: relative;
    right: 3px;
    bottom: 4px;
}
.modal-close:focus {
    outline: 0;
}
.modal-close:active {
    background: #41b97c;
    color: #ffffff; /* want this to work without !important */
    border: 1px solid #41b97c;
}
.modal-close:hover {
    border: 1px solid #41b97c;
    color: #41b97c;
}

<button  class="modal-close pull-right" aria-label="Close" >
    <span class="modal-close-x" aria-hidden="true">&times;</span>
</button>

This is a matter of selectors ordering ^{(which should ALWAYS follow LOVE and HATE https://css-tricks.com/remember-selectors-with-love-and-hate/)} given CSS specificity are the same the cascade part of CSS will take care of it and make the last rule override the priors.

How 爱与恨 https://css-tricks.com/remember-selectors-with-love-and-hate/应订购：

a:link
a:visited
a:hover /* Note that `a:focus` is the same order level as `a:hover` */
a:active

所以在你的情况下，应该是：

.modal-close:focus {}
.modal-close:hover {}
.modal-close:active {}