颜色在活动按钮上不起作用 [英] Color not working on active button

问题描述

我正在尝试使css字体的颜色在按下按钮时变为白色，但是，当前当前唯一的方法是使用！important并强制更改颜色。有没有不使用！important的方法吗？这是我的代码：

I am trying to get the css font color to change to white when a button is pressed, however the only way I can currently do this is if I use !important and force the color to change. Is there a way to do this without using !important? Here is my code:

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

Currently the button font color changes to the background color of .modal-close, unless I use !important to force it to change to white. Is there any way to make this work properly without using !important? Any help would be appreciated.

.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>

推荐答案

这是选择器对^{（进行排序的问题 爱与恨 ）}鉴于CSS的特定性相同，CSS的级联部分会处理它，并使最后一条规则优先于先前的规则。

This is a matter of selectors ordering ^{(which should ALWAYS follow 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.

如何< a href = https://css-tricks.com/remember-selectors-with-love-and-hate/ rel = nofollow noreferrer> 爱与恨 命令：

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

因此，在您的情况下，应为：

so in your case, should be:

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

这篇关于颜色在活动按钮上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！