颜色不适用于活动按钮

Question

我正在尝试让 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>

Answer 1

调换 :hover 和 :active defs

的顺序

.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:hover {
    border: 1px solid #41b97c;
    color: #41b97c;
}
.modal-close:active {
    background: #41b97c;
    color: #ffffff; /* want this to work without !important */
    border: 1px solid #41b97c;
}

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

Answer 2

只需将 :active 放在 CSS 中的 :hover 之后即可为其添加更多优先级并覆盖 :hover class :

.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:hover {
  border: 1px solid #41b97c;
  color: #41b97c;
}
.modal-close:active {
  background: #41b97c;
  color: #ffffff;
 /* border: 1px solid #41b97c; also no need this style as it's already defined on hover */
}

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

Answer 3

这是选择器排序的问题 ^{（应该始终遵循 LOVE and HATE）} 给定 CSS 特异性相同 CSS 的级联部分将处理它并使最后一条规则覆盖先验规则。

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

Answer 4

因为浏览器是从上到下读取的，首先应用顶部的，最后应用底部的，你可以简单地将 .modal-close:active 放在你的 CSS 的底部所以：

.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:hover {
    border: 1px solid #41b97c;
    color: #41b97c;
}
.modal-close:active {
    background: #41b97c;
    color: #ffffff;
    border: 1px solid #41b97c;
}

颜色不适用于活动按钮

Color not working on active button

html

css

button

pseudo-class