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

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

Answer 3

简单地将：在以下位置后激活：将鼠标悬停在CSS中以为其添加更多优先级并覆盖：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>

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

颜色不在活动按钮上

4 个答案: