Как я могу переопределить встроенные стили с помощью внешнего 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-селектор !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;
    }