Como posso substituir estilos inline com CSS externo?

Tenho uma marcação que usa estilos embutidos, mas não tenho acesso para alterar essa marcação. Como faço para substituir estilos embutidos em um documento usando apenas CSS? Não quero usar jQuery ou JavaScript.

HTML:

<div style="font-size: 18px; color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

CSS:

div {
   color: blue; 
   /* This Isn't Working */
}

A única maneira de substituir o estilo embutido é usando a !importantpalavra-chave ao lado da regra CSS. A seguir está um exemplo disso.

div {
        color: blue !important;
       /* Adding !important will give this rule more precedence over inline style */
    }

<div style="font-size: 18px; color: red;">
    Hello, World. How can I change this to blue?
</div>

Anotações importantes:

• O uso !importantnão é considerado uma boa prática . Portanto, você deve evitar o !importantestilo embutido.

• Adicionar a !importantpalavra-chave a qualquer regra CSS permite que a regra preceda forçosamente todas as outras regras CSS para esse elemento.

• Ele até substitui os estilos embutidos da marcação.

• A única maneira de substituir é usando outra !importantregra , declarada com maior especificidade CSS no CSS ou especificidade CSS igual posteriormente no código.

• Deve ler - Especificidade CSS por MDN 🔗

inline-stylesem um documento têm a prioridade mais alta, então, por exemplo, diga se você deseja alterar a cor de um divelemento para blue, mas você tem um inline stylecom uma colorpropriedade definida parared

<div style="font-size: 18px; color: red;">
   Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue; 
   /* This Won't Work, As Inline Styles Have Color Red And As 
      Inline Styles Have Highest Priority, We Cannot Over Ride 
      The Color Using An Element Selector */
}

Então, devo usar jQuery / Javascript? - A resposta é NÃO

Podemos usar o element-attrseletor CSS com !important, observe, !importanté importante aqui, caso contrário, não substituirá os estilos embutidos.

<div style="font-size: 30px; color: red;">
    This is a test to see whether the inline styles can be over ridden with CSS?
</div>

div[style] {
   font-size: 12px !important;
   color: blue !important;
}

Demo

Nota: A utilização !importantsó vai funcionar aqui, mas eu usei div[style]para selecionar especificamente divtendo style atributo

Você pode facilmente substituir o estilo embutido, exceto o !importantestilo embutido

tão

<div style="font-size: 18px; color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue !important; 
   /* This will  Work */
}

mas se você tem

<div style="font-size: 18px; color: red !important;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
   color: blue !important; 
   /* This Isn't Working */
}

agora será redapenas .. e você não pode substituí-lo

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

div[style] {
   background: yellow !important;
}

Abaixo está o link para mais detalhes: http://css-tricks.com/override-inline-styles-with-css/

usado !importantna propriedade CSS

<div style="color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
        color: blue !important;
    }