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

覆盖内联样式的唯一方法是使用!importantCSS规则旁边的关键字。以下是一个示例。

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特定性声明。