Problem setting CSS within style

Question

I am facing a problem. I want to put all my CSS inside the Style tag as it shows my code below:

<style>
    input[data-column="1"] { display: none; }
    input[data-column="2"] { display: none; }
    .editCancelar { margin-left:-2px;cursor:pointer; display:none }
    .editConcluir { margin-left:0px;cursor:pointer; display:none }
    .sgr_hidden { display:none }
    .bradC { color: White!important }
</style>

But the class . bradC is not assigning its style to the objects. It only works if I set the style property inside the html object, as I did below:

<ol class="breadcrumb" style="padding-top: 17px; margin-left: 15px">
    <li><a class="bradC" href="javascript:navegacao( 'mnManutencao', 'mnPrincipal' )">Início</a></li>
    <li class="active"><a href="javascript:navegacao( 'mnPrincipal', 'mnManutencao' )" class="bradC">Manutenção</a></li>
    <li class="active"><a href="javascript:navegacao( 'mnPrincipal', 'mnManUnidadeGerencial' )" class="bradC" >Unidade Gerencial e Equipe</a></li>
    <li class="active"><a href="#" class="bradC">Cadastro Classificação</a></li>
</ol>

Additional information:

When inspecting the element I see that the color of the element is coming from a CSS file that defined the color for all "a elements. bradC:link, a.bradC:visited".

This CSS file loads on the page, and my "style" tag of the page with the css set is below it.

Question:

How does the CSS assignment work in this case? How can I arrange everything within the style of the page and remove the style property from my element? I can’t change the order of the position of the CSS file with the "style" because it comes from a master page.

Answer 1

The problem may be that the element has a closed CSS for a.bradC:link and you’re trying to force the color to a.bradC.

In that case without the :link Since it’s not exactly the same rule, it might not overlap. However, I think having this behavior will be different in different browsers. He should overpower.

Try this:

a.bradC:link, a.bradC:visited { color: White!important }

But in the browsers I tried I can overlap the color in the expected way. jsFiddle