Situação
Eu tenho vários arquivos css
, alguns meus, outros de bibliotecas.
Duvida
- Qual o melhor meio de bloquear o
css
externo para determinados elementos?
Exemplo
Efeito Atual
/***** CSS EXTERNO *****/
form div{
padding: 5px;
clear:both;
}
/***** OUTRO CSS EXTERNO *****/
div div{
margin: 10px;
}
div label{
font-size: 20px;
}
/***** MEU CSS *****/
.content-form>div{
border:1px solid #CCC;
float:left;
min-width:50px;
min-height:10px;
text-align:center;
}
.content-form>div>label{
color:blue;
}
<div>
<form class="content-form">
<div>
<label>Item 1</label>
</div>
<div>
<label>Item 2</label>
</div>
<div>
<label>Item 2</label>
</div>
<div>
<label>Item 3</label>
</div>
</form>
</div>
Note que aqui os css externos estão interferindo no resultado que eu desejo, para o css que eu montei.
Efeito Desejado
.content-form>div{
border:1px solid #CCC;
float:left;
min-width:50px;
min-height:10px;
text-align:center;
}
.content-form>div>label{
color:blue;
}
<div>
<form class="content-form">
<div>
<label>Item 1</label>
</div>
<div>
<label>Item 2</label>
</div>
<div>
<label>Item 2</label>
</div>
<div>
<label>Item 3</label>
</div>
</form>
</div>
Nota
- Eu não posso remover os arquivos, pois alguns css são usados um outros lugares
- Eu não posso remover os
css
específicos, pois eles são usados em outros elementos, apenas quero inativá-lo para aquele elemento especifico.
Tentativa atual
/***** CSS EXTERNO *****/
form div{
padding: 5px;
clear:both;
}
/***** OUTRO CSS EXTERNO *****/
div div{
margin: 10px;
}
div label{
font-size: 20px;
}
/***** MEU CSS *****/
form.content-form div{
padding:0;
clear:none;
}
div .content-form div{
margin:0;
}
div .content-form div label{
font-size:inherit;
}
.content-form>div{
border:1px solid #CCC;
float:left;
min-width:50px;
min-height:10px;
text-align:center;
}
.content-form>div>label{
color:blue;
}
<div>
<form class="content-form">
<div>
<label>Item 1</label>
</div>
<div>
<label>Item 2</label>
</div>
<div>
<label>Item 2</label>
</div>
<div>
<label>Item 3</label>
</div>
</form>
</div>
Note que aqui eu estou basicamente sobrescrevendo todo o css externo.
file1 - div div{}
,file2 - div div
, ai o segundo sobrescreve o primeiro, o problema é que é a especificidade que cada arquivo esta dando.file1 - div div{}
,file2 - form div{}
ai ele interpreta como coisas diferentes e gera um "merge", o que não é desejado.css
, a não ser a ordem de chamada dos arquivos, como já mencionado pelo @WallaceMaxters . Nesse caso, acredito que você deve realmente criar regras que sobrescrevam as propriedades desejadas.