Problem setting CSS inside 'style'

Question

Problem setting CSS inside 'style'

Navigation

#1 by (5 votes)

5

I'm facing a problem. I want to put all my CSS inside the Style tag as shown in 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>

However, the .bradC class is not assigning its style to 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 I inspect the element I see that the color of the element is coming from a CSS file that defined the color for all elements "a.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 CSS assignment work in this case? How can I organize everything within the style of the page, and can I remove the style property from my element? I can not change the position of the CSS file with "style" because it comes from a master page.

html css

asked by anonymous 28.02.2014 / 12:21

1 answer

How to read a table missing elements or misconfigured? How to index and search for files in Lucene

score 5 · Accepted Answer

The problem may be that the element has a CSS set to a.bradC:link and you are trying to force the color to a.bradC .

In this case without the :link as it is not exactly the same rule, it may not overlap. But I think this behavior will be different in different browsers. It should overlap.

Try this:

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

But in browsers I've experimented with overlapping color the way you expect it to. jsFiddle