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

Ответ 1

Только для переопределения встроенного стиля используется ключевое слово !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>

Ответ 2

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-attr CSS 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Атрибут

Ответ 3

Вы можете легко переопределить встроенный стиль, кроме встроенного !important style

так

<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.. и вы не можете переопределить его

Ответ 4

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