Color not working on active button

问题:

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:

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>

回答1:

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.

How LOVE and HATE should be ordered:

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

回答2:

Switch the order of your :hover and :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:

Simply put the :active after the :hover in the CSS to add more priority to it and override the :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>

回答4:

Because the browser reads top to bottom with the ones at the top applied first and the ones at the bottom applied last, you can simply put .modal-close:active at the bottom of your CSS like so:

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