css - 如何使用外部 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

覆盖内联样式的唯一方法是在 CSS 规则旁边使用 !important 关键字。以下是它的一个例子。

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 Notes:

• Using !important is not considered as a good practice. Hence, you should avoid both !important and inline style.

• Adding the !important keyword to any CSS rule lets the rule forcefully precede over all the other CSS rules for that element.

• It even overrides the inline styles from the markup.

• The only way to override is by using another !important rule, declared either with higher CSS specificity in the CSS, or equal CSS specificity later in the code.

• Must Read - CSS Specificity by MDN 🔗