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

Question

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

}

445 4

css

4 ответов:

Comments

Ничего не найдено.

Rohit Agrawal · Accepted Answer · 2017-02-13 18:05:55

единственный способ переопределить встроенный стиль-это использовать !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

Mr. Alien · Accepted Answer · 2013-05-29 17:09:52

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 с !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 атрибут

IE kills stay away from it · Accepted Answer · 2013-06-24 14:08:33

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

jroi_web · Accepted Answer · 2014-08-26 09:37:26

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