Placing the !important
keyword after an attribute will give that attribute precedence.
Moving inline override CSS into a stylesheet
-
17-07-2023 - |
Pergunta
I am trying to override a link style in a parent CSS file someplace that is underlining my button text on hover. I found that by attaching the style I want (text-decoration:none) inline, on the element does the override but I would rather not do that.
Any ideas on how to do this better?
<a href="javascript:void(0);" style="text-decoration:none;" class="nco-approve-btn" data-attr-club-id="14">Approve</a>
.nco-approve-btn {
background: #ad0a0a;
background-image: -webkit-linear-gradient(top, #ad0a0a, #de5252);
background-image: -moz-linear-gradient(top, #ad0a0a, #de5252);
background-image: -ms-linear-gradient(top, #ad0a0a, #de5252);
background-image: -o-linear-gradient(top, #ad0a0a, #de5252);
background-image: linear-gradient(to bottom, #ad0a0a, #de5252);
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 11px;
padding: 5px 7px 5px 7px;
text-decoration: none;
}
.nco-approve-btn:hover {
background: #8f1313;
background-image: -webkit-linear-gradient(top, #8f1313, #731717);
background-image: -moz-linear-gradient(top, #8f1313, #731717);
background-image: -ms-linear-gradient(top, #8f1313, #731717);
background-image: -o-linear-gradient(top, #8f1313, #731717);
background-image: linear-gradient(to bottom, #8f1313, #731717);
text-decoration: none;
color: #ffffff;
}
.nco-approve-btn:link {text-decoration: none; color: #ffffff;}
.nco-approve-btn:visited {text-decoration: none; color: #ffffff;}
.nco-approve-btn:active {text-decoration: none; color: #ffffff;}
Solução
Outras dicas
There is probably some stronger rule in your stylesheet such as
.parent-class .nco-approve-btn{text-decoration:underline;}
Check in developer tools what is the rule, and then make the one for the link without decoration stronger (by adding extra class). You can use !important, but do that only if you are sure you will never ever ever will need the class to have the decoration.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow