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

#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和内联样式。
在任何CSS规则中添加!important关键字可以使该规则强行位于该元素的所有其他CSS规则之前。
它甚至会覆盖标记中的内联样式。
唯一的覆盖方法是使用另一个!important规则，该规则在CSS中具有较高的CSS特异性，或者在代码稍后具有相等的CSS特异性。 br />必须阅读-MDN的CSS特殊性🔗

好吧，这种风格取决于他，实际上没有必要他仅用于覆盖内联css

–罗希特（Rohit Agrawal）
13年5月29日在12:07

我知道，但我的意思是一样！重要只会增加特定属性的得分，他可能会在某些区域使用其他属性（而不是覆盖）

–罗希特（Rohit Agrawal）
13年5月29日在12:11

为什么重要的不良习惯？

–险恶胡须
2014年3月3日在10:51

@BFDatabaseAdmin，因为以后如果需要任何特殊情况就无法覆盖它

–罗希特（Rohit Agrawal）
2014年4月4日在7:58

@BFWebAdmin问题是您有时别无选择。例如，可以对新的不可见Recaptcha中的“徽章”进行样式设置，但具有部分内联样式，因此您必须像这样或通过js覆盖它们，并且首选纯CSS解决方案。

– My1
16 Dec 13'在10:55

#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吗？ -答案是否定的

我们可以将element-attr CSS选择器与!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
属性

那么，我应该使用内联样式吗？ -答案为否：-)

– PeeHaa
2013年5月29日14:11

“那么，我应该使用jQuery / Javascript吗？-答案是否定的”为什么？如果我在无法控制的实体将内联样式添加到元素的环境（例如Sharepoint）中工作，为什么我不使用Jquery删除有问题的内联样式，以便我的网站外部主题显示出来？似乎比在我以后可能要在特定实例中覆盖的特征爆破！important更为有效。

– Neberu
15年3月6日在0:49

@Neberu-因为JS可以在浏览器中被阻止/关闭。使用！important不能AFAIK。

–托尼
2015年3月7日在21:13

通常js也是imo不好的，我的意思是您是否打开了一个陌生人发送的可执行文件？我猜不是，但是浏览器每次点击都会这样做

– My1
16 Dec 13'在10:57

#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 ..您不能覆盖它

这与几个月前添加的答案有何不同？

–险恶胡须
2014年9月11日下午7:49

@BFDatabaseAdmin此答案描述的是内联样式具有！important的行为，而其他答案均未涵盖这一点。这可能不是一个完全独立的答案，但是与提供的其他答案不同。

– grg
15年4月7日在18:08

但是再次使用具有重要意义的内联样式实在是过大了，因为默认情况下，它始终具有最高优先级。

– My1
16 Dec 13'在10:58

#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 楼

在CSS声明之后添加!important。

 div {
   color: blue !important; 

   /* This Is Now Working */
}

编程黑洞网