如何用外部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 */ }
只有在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>
文档中的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 Selector with !important ，note !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]select器来专门select具有style属性的div
除了inline !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/
