Как я могу переопределить встроенные стили с помощью внешнего CSS?

Question

У меня есть разметка, которая использует встроенные стили, но у меня нет доступа к изменению этой разметки. Как переопределить встроенные стили в документе, используя только 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 */ 
} 

Answer 1

To единственный способ переопределить встроенный стиль с помощью ключевого слова !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 Specificity by MDN

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

Demo

Примечание: Использование !important ТОЛЬКО будет работать здесь, но я использовал div[style] селектор конкретно выбрать div имеющий style атрибут

Answer 3

Вы можете легко переопределить встроенный стиль, за исключением встроенного !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 только .. и вы не можете изменить его

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