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

99

У меня есть разметка, в которой используются встроенные стили, но у меня нет доступа для изменения этой разметки. Как переопределить встроенные стили в документе, используя только 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 */
}
Г-н Чужой
источник
2
Зачем использовать встроенные стили, если вы хотите их переопределить?
Sinister Beard
36
@BFDatabaseAdmin Возможно, он не сможет получить доступ к разметке, в которой объявлены встроенные стили.
TylerH

Ответы:

176

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

Рохит Агравал
источник
1
хорошо, что стиль разделяет его, на самом деле это не обязательно, что он использует только для переопределения встроенного CSS
Рохит Агравал
1
я знаю, но то же самое, что я говорю! important только увеличит оценку для определенного свойства, он может использовать другие свойства (не для переопределения) в блоке some
Рохит Агравал
Почему! Важна плохая практика?
Sinister Beard
1
@BFDatabaseAdmin, потому что вы не сможете отменить это позже, если вам понадобится какой-либо особый случай,
Рохит Агравал,
1
@BFWebAdmin проблема в том, что иногда у вас нет выбора. например, «значок» из новой невидимой рекапчи может быть стилизован, но имеет частично встроенные стили, поэтому вам придется переопределить их либо так, либо с помощью js, и вы предпочтете решение на чистом CSS.
My1
27

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

Г-н Чужой
источник
2
Итак, следует ли использовать встроенные стили? - Ответ НЕТ :-)
PeeHaa
«Итак, следует ли мне использовать jQuery / Javascript? - Ответ НЕТ» Почему? Если я работаю в среде (такой как Sharepoint), где встроенные стили добавляются к элементам неконтролируемой сущностью, почему бы мне не использовать JQuery для удаления оскорбительных встроенных стилей, чтобы внешняя тема моих сайтов была видна? Кажется, более подходящее решение, чем взрыв! Важно для свойства, которое я, возможно, захочу переопределить в конкретном случае позже.
Neberu 06
2
@Neberu - Потому что JS можно заблокировать / отключить в браузере. Использование !importantне может AFAIK.
Тони,
1
Также js в целом плохой, я имею в виду, открываете ли вы исполняемые файлы, присланные вами от неизвестного человека? Думаю, нет, но браузер делает это с каждым щелчком
My1
11

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

IE убивает, держитесь подальше от него
источник
1
Чем это отличается от ответов, добавленных месяцами ранее?
Sinister Beard
4
@BFDatabaseAdmin Этот ответ описывает поведение при !importantналичии встроенного стиля , который не рассматривается ни в одном из других ответов. Это может быть не полностью автономный ответ, но он отличается от других предоставленных ответов.
grg
но опять же, использование встроенного стиля с important действительно излишне, поскольку по умолчанию он в любом случае имеет наивысший приоритет.
My1
6
<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/

jroi_web
источник
5
Чем это отличается от ответов, добавленных месяцами ранее?
Sinister Beard
1
возможно, нет никакой разницы, если вы уже знали ответ ... но для некоторых новичков я надеюсь, что это может им помочь ... особенно ссылка, где это более подробно ... в любом случае спасибо за комментарий.
jroi_web
1

используется !importantв свойстве CSS

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

div {
        color: blue !important;
    }
Вишал Вагасия
источник