Як я можу замінити вбудовані стилі за допомогою зовнішнього CSS?

У мене є розмітка, яка використовує вбудовані стилі, але у мене немає доступу для зміни цієї розмітки. Як я можу замінити вбудовані стилі в документі, використовуючи лише CSS? Я не хочу використовувати jQuery чи 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 */
}

Єдиний спосіб замінити вбудований стиль - це використання !importantключового слова поряд із правилом CSS. Нижче наведено приклад цього.

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>

Важливі примітки:

• Використання !importantне вважається доброю практикою . Отже, слід уникати як !importantвбудованого, так і вбудованого стилю.

• Додавання !importantключового слова до будь-якого правила CSS дозволяє правилу з силою передувати всі інші правила CSS для цього елемента.

• Це навіть замінює вбудовані стилі з розмітки.

• Єдиний спосіб замінити - це використання іншого !importantправила , оголошеного або з вищою специфічністю CSS в CSS, або рівною специфічністю CSS пізніше в коді.

• Потрібно прочитати - Специфіка CSS за MDN 🔗

inline-stylesв документі , мають найвищий пріоритет, тому, наприклад , кажуть , що якщо ви хочете змінити колір divелемента до blue, але ви inline styleз colorнабором властивостей дляred

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

Отже, чи слід використовувати jQuery / Javascript? - Відповідь НІ

Ми можемо використовувати element-attrCSS Selector з !important, зауважте, !importantтут важливо, інакше він не перевершить вбудовані стилі ..

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

Демо

Примітка: Використання !importantтільки буде працювати тут, але я використав div[style]селектор спеціально вибрати divмає style атрибут

Ви можете легко перевизначити вбудований стиль , за винятком вбудованого !importantстилю

так

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

але якщо у вас є

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

тепер це буде redлише .., і ви не можете його замінити

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

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

Нижче наведено посилання для більш докладної інформації: http://css-tricks.com/override-inline-styles-with-css/

використовується !importantу властивості CSS

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

div {
        color: blue !important;
    }