颜色在活动按钮上不起作用答案

【问题标题】：Color not working on active button颜色在活动按钮上不起作用
【发布时间】：2018-05-16 02:10:58
【问题描述】：

我试图在按下按钮时将 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>

【问题讨论】：

:modal-close:active 和 .modal-close:hover 具有相同的特异性。所以后一个优先。

标签： html css button pseudo-class

【解决方案1】：

这是一个选择器排序的问题 ^{（应该始终遵循 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 {}

【讨论】：

【解决方案2】：

切换: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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：