127

我有使用内联样式的标记，但我无权更改此标记。如何仅使用 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

7 回答 7

208

!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不被认为是一种好的做法。因此，您应该避免使用!important内联样式。

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

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

  • 覆盖的唯一方法是使用另一个!important规则，在 CSS 中以更高的 CSS 特定性声明，或者在代码中稍后的 CSS 特定性声明。

  • 必读 - MDN 的 CSS 特殊性

于 2013-05-29T11:58:03.707 回答
33

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;
}

演示

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

于 2013-05-29T11:56:11.370 回答
12

您可以轻松覆盖除内联样式外的内联!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只是..你不能覆盖它

于 2013-06-24T11:08:33.400 回答
5 
<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/

于 2014-08-26T06:37:26.733 回答
0

用于!importantCSS 属性 

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


div {
        color: blue !important;
    }
于 2019-12-26T09:24:07.497 回答
0

!important，在您的 CSS 声明之后。

div {
   color: blue !important; 

   /* This Is Now Working */
}
于 2020-11-06T12:55:15.827 回答
-1 

div {
 color : blue !important;
}
<div style="color : red">
  hello
</div>

于 2021-03-29T09:03:51.007 回答