如何用外部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不被视为一个很好的做法。因此，您应该避免!important和内联样式。

• 添加!important关键字任何CSS规则允许的规则在所有该元素的其它CSS规则强行先。

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

• 覆盖的唯一方法是通过其他!important规则，要么在后面的代码中CSS较高的CSS特异性或等于CSS具体声明。

• 必读 - CSS Specificity by MDN

Answer 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选择器，!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只能在这里使用，但我用 div[style]选择具体选择具有divstyle 属性

Answer 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只..你不能覆盖它

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