如何使用外部 CSS 覆盖内联样式？答案

【问题标题】：How can I override inline styles with external CSS?如何使用外部 CSS 覆盖内联样式？
【发布时间】：2013-05-24 16:10:30
【问题描述】：

我有使用内联样式的标记，但我无权更改此标记。如何仅使用 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 */
}

【问题讨论】：

标签： css

【解决方案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 不是一种好的做法。因此，您应该避免使用!important 和内联样式。

将 !important 关键字添加到任何 CSS 规则中，可以让该规则强制优先于该元素的所有其他 CSS 规则。

它甚至覆盖标记中的内联样式。

唯一的覆盖方法是使用另一个 !important 规则，在 CSS 中声明为具有更高的 CSS 特定性，或者在代码中稍后声明具有相同的 CSS 特定性。

必读 - CSS Specificity by MDN ?

【讨论】：

好吧，这种风格实际上由他决定，他没有必要只用于覆盖内联 css
我知道，但我也是这么说的！important 只会增加特定属性的分数，他可能会在某些块中使用其他属性（不用于覆盖）
为什么 !important 是不好的做法？
@BFDatabaseAdmin 因为如果您需要任何特殊情况，您以后无法覆盖它
@BFWebAdmin 问题是您有时别无选择。例如，新的隐形 recaptcha 中的“徽章”可以设置样式，但具有部分内联样式，因此您必须像这样或通过 js 覆盖它们，并且更喜欢纯 CSS 解决方案。

【解决方案2】：

文档中的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 吗？ - 答案是NO

我们可以使用element-attr CSS 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;
}

Demo

注意：使用 !important ONLY 可以在这里工作，但我已经使用过 div[style] 选择器专门选择具有style 的div 属性

【讨论】：

那么，我应该使用内联样式吗？ - 答案是 NO :-)
“那么，我应该使用 jQuery/Javascript 吗？ - 答案是否定的” 为什么？如果我在一个无法控制的实体将内联样式添加到元素的环境（例如 Sharepoint）中工作，为什么我不使用 Jquery 删除有问题的内联样式，以便我的网站外部主题显示出来？似乎比爆破 !important 更精确的解决方案，我稍后可能想在特定实例中覆盖。
@Neberu - 因为 JS 可以在浏览器中被阻止/关闭。使用 !important 不能 AFAIK。
一般来说js也很糟糕，我的意思是你打开你从一个不知名的人发送的可执行文件？我猜不是，但浏览器每次点击都会这样做

【解决方案3】：

您可以轻松覆盖除内联!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 .. 你不能覆盖它

【讨论】：

这与几个月前添加的答案有何不同？
@BFDatabaseAdmin 此答案描述了当内联样式具有!important 时的行为，其他任何答案均未涵盖这一点。这可能不是一个完全独立的答案，但与提供的其他答案不同。
但是再次使用具有重要意义的内联样式确实是矫枉过正，因为它默认具有最高优先级。

【解决方案4】：

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

【讨论】：

投反对票，因为它不起作用。

【解决方案5】：

在 CSS 属性中使用 !important

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

div {
        color: blue !important;
    }

【讨论】：

【解决方案6】：

!important，在您的 CSS 声明之后。

div {
   color: blue !important; 

   /* This Is Now Working */
}

【讨论】：

【解决方案7】：

div {
 color : blue !important;
}

<div style="color : red">
  hello
</div>

【讨论】：