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

要仅覆盖内联样式,请使用!importantCSS规则旁边的关键字.以下是它的一个例子.

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特性.

• 必读 - MDN的CSS特异性

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

我们可以使用element-attrCSS Selector !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;
}

演示

注意:使用!importantONLY会在这里工作,但我已经使用了 div[style]selector来专门选择div具有style 属性

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/