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

只有在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不被视为良好做法。因此，您应该避免使用!important和内联样式。



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



甚至会覆盖标记中的内嵌样式。



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



必读 - CSS Specificity by MDN

Answer 2

文档中的

inline-styles具有最高优先级，例如，如果您要将div元素的颜色更改为blue，但您有{{1}将inline style属性设置为color

red

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

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

我们可以将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 */ } CSS选择器与element-attr一起使用，注意，!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>

Demo

注意：仅使用div[style] { font-size: 12px !important; color: blue !important; }会在这里工作，但我已经习惯了 !important选择器专门选择div[style] div 属性

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/

Answer 5

在CSS属性中使用了!important

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

div {
        color: blue !important;
    }

Answer 6

!important，在CSS声明之后。

div {
   color: blue !important; 

   /* This Is Now Working */
}

Answer 7

div {
 color : red !important;
}

<div style="color : green">
  hello
</div>

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

7 个答案: