Jak mogę zastąpić style wbudowane zewnętrznym kodem CSS?

Mam znaczniki korzystające ze stylów wbudowanych, ale nie mam dostępu do zmiany tego znacznika. Jak przesłonić style wbudowane w dokumencie, używając tylko CSS? Nie chcę używać jQuery ani 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 */
}

Jedynym sposobem na przesłonięcie stylu wbudowanego jest użycie !importantsłowa kluczowego obok reguły CSS. Oto przykład.

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>

Ważne notatki:

• Używanie !importantnie jest uważane za dobrą praktykę . Dlatego należy unikać obu !importanti stylu inline.

• Dodanie !importantsłowa kluczowego do dowolnej reguły CSS powoduje, że reguła ma pierwszeństwo przed wszystkimi innymi regułami CSS dla tego elementu.

• Zastępuje nawet style wbudowane ze znaczników.

• Jedynym sposobem na przesłonięcie jest użycie innej !importantreguły , zadeklarowanej z wyższą specyficznością CSS w CSS lub równą specyficzności CSS w dalszej części kodu.

• Musi przeczytać - Specyfika CSS autorstwa MDN 🔗

inline-stylesw dokumencie mają najwyższy priorytet, więc na przykład powiedzieć, że jeśli chcesz zmienić kolor z divelementem blue, ale masz inline stylez colorwłasności do zestawured

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

Czy powinienem więc używać jQuery / Javascript? - Odpowiedź brzmi NIE

Możemy użyć element-attrselektora CSS z !important, uwaga, !importantjest tutaj ważne, w przeciwnym razie nie przejdzie przez style wbudowane.

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

Próbny

Uwaga: Używanie !importanttylko będą tu pracować, ale Użyłem div[style]wybieraka specjalnie wybrać divposiadające style atrybut

Możesz łatwo zastąpić styl wbudowany, z wyjątkiem !importantstylu wbudowanego

więc

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

ale jeśli masz

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

teraz będzie redtylko… i nie da się tego zmienić

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

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

Poniżej znajduje się link, aby uzyskać więcej informacji: http://css-tricks.com/override-inline-styles-with-css/

używane !importantwe właściwości CSS

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

div {
        color: blue !important;
    }