¿Cómo puedo anular los estilos en línea con CSS externo?

Tengo un marcado que usa estilos en línea, pero no tengo acceso para cambiar este marcado. ¿Cómo anulo los estilos en línea en un documento que usa solo CSS? No quiero usar jQuery o 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 */
}

La única forma de anular el estilo en línea es utilizando una !importantpalabra clave al lado de la regla CSS. A continuación se muestra un ejemplo de ello.

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>

Notas importantes:

• El uso !importantno se considera una buena práctica . Por lo tanto, debe evitar tanto !importantel estilo en línea.

• Agregar la !importantpalabra clave a cualquier regla CSS permite que la regla preceda con fuerza sobre todas las demás reglas CSS para ese elemento.

• Incluso anula los estilos en línea del marcado.

• La única forma de anular es utilizando otra !importantregla , declarada con mayor especificidad de CSS en el CSS o con la misma especificidad de CSS más adelante en el código.

• Debe leer: especificidad de CSS por MDN 🔗

inline-stylesen un documento tienen la prioridad más alta, por ejemplo, diga si desea cambiar el color de un divelemento a blue, pero inline styletiene una colorpropiedad establecida enred

<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 */
}

Entonces, ¿debería usar jQuery / Javascript? - La respuesta es NO

Podemos usar element-attrCSS Selector con !important, nota, !importantes importante aquí, de lo contrario no anulará los estilos en línea.

<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;
}

Manifestación

Nota: Usar !importantSOLO funcionará aquí, pero he usado el div[style]selector para seleccionar específicamente divtener style atributo

Puede anular fácilmente el estilo en línea, excepto el !importantestilo en línea

entonces

<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 */
}

pero si tienes

<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 */
}

ahora será redsolo .. y no puedes anularlo

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

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

A continuación se muestra el enlace para obtener más detalles: http://css-tricks.com/override-inline-styles-with-css/

utilizado !importanten la propiedad CSS

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

div {
        color: blue !important;
    }