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

How can I override inline styles with external CSS?

提问by Mr. Alien

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:

HTML：

<div style="font-size: 18px; color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

CSS:

CSS：

div {
   color: blue; 
   /* This Isn't Working */
}

回答by Rohit Agrawal

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

覆盖内联样式的唯一方法是!important在 CSS 规则旁边使用关键字。下面是它的一个例子。

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 !importantis not considered as a good practice. Hence, you should avoid both !importantand inline style.

• Adding the !importantkeyword to any CSS rule lets the rule forcefully precede over all the other CSS rulesfor that element.

• It even overrides the inline stylesfrom the markup.

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

• Must Read - CSS Specificity by MDN

重要笔记：

• 使用!important不被认为是一个好的做法。因此，您应该同时避免!important和内联样式。

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

• 它甚至会覆盖标记中的内联样式。

• 覆盖的唯一方法是使用另一个!important规则，在 CSS 中声明具有更高的 CSS 特异性，或者在代码的后面声明具有相同的 CSS 特异性。

• 必读 - MDN 的 CSS 特异性

回答by Mr. Alien

inline-stylesin a document have the highest priority, so for example say if you want to change the color of a divelement to blue, but you've an inline stylewith a colorproperty set to red

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

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

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

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

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

Demo

演示

Note: Using !importantONLY will work here, but I've used div[style]selector to specifically select divhaving styleattribute

注意：使用!importantONLY 在这里有效，但我使用 div[style]选择器专门选择div具有style属性

回答by IE kills stay away from it

You can easily override inline style except inline !importantstyle

除了内联样式外，您可以轻松覆盖内联!important样式

so

所以

<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 redonly .. and you can not override it

现在它将red只是 .. 你不能覆盖它

回答by jroi_web

<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-tricks.com/override-inline-styles-with-css/

回答by Vishal Vaghasiya

used !importantin CSS property

使用!important的CSS属性

<div style="color: red;">
    Hello World, How Can I Change The Color To Blue?
</div>

div {
        color: blue !important;
    }