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

I have markup that uses inline styles, but I don't have access to change this markup. How do I override inline styles in a document using only CSS? I don't want to use jQuery or JavaScript.

我有使用内联样式的标记，但是我没有权限更改这个标记。如何只使用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 */
}

4 个解决方案

#1

129

To only way to override inline style is by using !important keyword beside the CSS rule. Following is an example of it.

重写内联样式的唯一方法是在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 Notes:

重要提示:

Using !important is not considered as a good practice. Hence, you should avoid both !important and inline style.

使用!重要的不是一个好的实践。因此，您应该同时避免重要的和内联的样式。

Adding the !important keyword to any CSS rule lets the rule forcefully precede over all the other CSS rules for that element.

将!important关键字添加到任何CSS规则中，都可以使该规则强制先于该元素的所有其他CSS规则。

It even overrides the inline styles from the markup.

它甚至重写了标记中的内联样式。

The only way to override is by using another !important rule, declared either with higher CSS specificity in the CSS, or equal CSS specificity later in the code.

重写的唯一方法是使用另一个重要的规则，在CSS中声明更高的CSS特异性，或者在后面的代码中声明相同的CSS特异性。

Must Read - CSS Specificity by MDN ????

必须阅读——CSS特异性MDN????吗

#2

inline-styles in a document have the highest priority, so for example say if you want to change the color of a div element to blue, but you've an inline style with a color property set to red

文档中的内联样式具有最高的优先级，例如，如果您想将div元素的颜色更改为蓝色，但是您的内联样式的颜色属性设置为红色

<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 */
}

So, Should I Use jQuery/Javascript? - Answer Is NO

那么，我应该使用jQuery/Javascript吗?——答案是否定的

We can use element-attr CSS Selector with !important, note, !important is important here, else it won't over ride the inline styles..

我们可以使用element-attr CSS选择器与!重要，注意，!重要在这里是重要的，否则它不会超越内联样式。

<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

演示

Note: Using !important ONLY will work here, but I've used div[style] selector to specifically select div having style attribute

注意:Using !important只在这里有效，但是我使用了div[style] selector来专门选择具有style属性的div

#3

You can easily override inline style except inline !important style

您可以轻松地覆盖内联样式，除了内联!重要的样式。

所以

<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 */
}

but if you have

但是如果你有

<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 */
}

now it will be red only .. and you can not override it

现在只剩下红色了。你不能重写它

#4

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

div[style] {
   background: yellow !important;
}

Below is the link for more details: http://css-tricks.com/override-inline-styles-with-css/

以下是更多细节的链接:http://css- passs.com/over搭线-styles-with-css/。

#1

129