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

Question

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

Answer 1

inline-styles在文档中具有最高优先级，例如，如果要更改div元素到blue，但你有一个inline style带着color属性设置为red<div&nbsp;style="font-size:&nbsp;18px;&nbsp;color:&nbsp;red;"> &nbsp;&nbsp;&nbsp;Hello&nbsp;World,&nbsp;How&nbsp;Can&nbsp;I&nbsp;Change&nbsp;The&nbsp;Color&nbsp;To&nbsp;Blue?</div>div&nbsp;{ &nbsp;&nbsp;&nbsp;color:&nbsp;blue;&nbsp; &nbsp;&nbsp;&nbsp;/*&nbsp;This&nbsp;Won't&nbsp;Work,&nbsp;As&nbsp;Inline&nbsp;Styles&nbsp;Have&nbsp;Color&nbsp;Red&nbsp;And&nbsp;As&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Inline&nbsp;Styles&nbsp;Have&nbsp;Highest&nbsp;Priority,&nbsp;We&nbsp;Cannot&nbsp;Over&nbsp;Ride&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The&nbsp;Color&nbsp;Using&nbsp;An&nbsp;Element&nbsp;Selector&nbsp;*/}那么，我应该使用jQuery/Javascript吗？-答案是不我们可以用element-attrCSS选择器!important注意，!important在这里很重要，否则它不会超过内联风格。<div&nbsp;style="font-size:&nbsp;30px;&nbsp;color:&nbsp;red;"> &nbsp;&nbsp;&nbsp;&nbsp;This&nbsp;is&nbsp;a&nbsp;test&nbsp;to&nbsp;see&nbsp;whether&nbsp;the&nbsp;inline&nbsp;styles&nbsp;can&nbsp;be&nbsp;over&nbsp;ridden&nbsp;with&nbsp;CSS?</div>div[style]&nbsp;{ &nbsp;&nbsp;&nbsp;font-size:&nbsp;12px&nbsp;!important; &nbsp;&nbsp;&nbsp;color:&nbsp;blue&nbsp;!important;}演示注：使用!important只会在这里工作，但我用过div[style]选择器专门选择div有style属性

Answer 2

除了内联之外，您可以轻松地重写内联样式。!important风格所以<div&nbsp;style="font-size:&nbsp;18px;&nbsp;color:&nbsp;red;"> &nbsp;&nbsp;&nbsp;&nbsp;Hello&nbsp;World,&nbsp;How&nbsp;Can&nbsp;I&nbsp;Change&nbsp;The&nbsp;Color&nbsp;To&nbsp;Blue?</div>div&nbsp;{ &nbsp;&nbsp;&nbsp;color:&nbsp;blue&nbsp;!important;&nbsp; &nbsp;&nbsp;&nbsp;/*&nbsp;This&nbsp;will&nbsp;&nbsp;Work&nbsp;*/ }但如果你有<div&nbsp;style="font-size:&nbsp;18px;&nbsp;color:&nbsp;red&nbsp;!important;"> &nbsp;&nbsp;&nbsp;&nbsp;Hello&nbsp;World,&nbsp;How&nbsp;Can&nbsp;I&nbsp;Change&nbsp;The&nbsp;Color&nbsp;To&nbsp;Blue?</div>div&nbsp;{ &nbsp;&nbsp;&nbsp;color:&nbsp;blue&nbsp;!important;&nbsp; &nbsp;&nbsp;&nbsp;/*&nbsp;This&nbsp;Isn't&nbsp;Working&nbsp;*/ }现在它将是red只有.。你不能覆盖它