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

覆盖内联样式的唯一方法是使用!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特定性声明。

• 必须阅读-MDN的CSS特殊性🔗

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

演示版

注意：!important仅在这里可以使用，但是我使用 div[style]选择器专门选择了div具有style 属性

您可以轻松地覆盖除内嵌内嵌式的!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只有..并且您不能覆盖它

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

用于!importantCSS属性

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

div {
        color: blue !important;
    }