Tem havido alguns incidentes quando me deparei querendo substituir alguns estilos inline e eu sempre pensei que isso era uma coisa impossível de fazer.
No outro dia me deparei com este artigo por Natalie Jost
http://nataliejost.com/override-inline-styles-from-the-stylesheet/
, e ela realmente veio através de alguns cenários semelhantes e veio com uma solução muito inteligente.
Por exemplo, digamos que o html ficou assim:
<div class="block">
<span style="font-weight: bold; color: red;">Hello World</span>
</div>
Você pode substituir o child span por:
usando o seguinte css:
block span[style]{
font-weight: normal !important;
color: #000 !important;
}
Infelizmente, o lado negativo disso é técnica é que ela não vai funcionar no IE6 e abaixo, mas ele não funciona no IE7, IE8, Fire Fox, Safari e Opera.
Este maldito truque CSS suculenta tem sido em torno de um tempo agora, mas eu queria fazer um post especial compartilhá-lo novamente para espalhar a boa palavra.
Muitas vezes pensamos de estilos inline, como forma de substituir estilos montamos no CSS. 99% das vezes, este é o caso, e é muito útil. Mas há algumas circunstâncias em que você precisa fazer é o contrário. Como, há estilos inline em algumas marcações que você absolutamente não pode remover, mas você precisa substituir o que esses estilos são. Esta poderia ser a marcação que está sendo inserido na página de JavaScript estrangeiros ou, talvez, gerados a partir das entranhas de um CMS que você não pode controlar facilmente.
Obrigado nossas estrelas da sorte, podemos sobrescrever estilos inline diretamente da folha de estilo. Tome este exemplo de marcação
<div style="background: red;">
The inline styles for this div should make it red.
</div>
Podemos lutar que com este:
div[style] {
background: yellow !important;
}
Fonte:
http://goo.gl/Hy0TF
