如何使用外部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 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-attrCSS选择器!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属性

Answer 2

除了内联之外，您可以轻松地重写内联样式。!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只有.。你不能覆盖它