如何使用外部文件覆盖内联CSS规则？

Question

如何使用外部样式表文件覆盖内联CSS规则？

这是我的HTML代码：

<div class="mydiv" style="background:#000"> lorem ipsom</div>

我想使用CSS更改背景颜色。这是我的CSS代码：

.mydiv {background:#f00; color: #000;}

但这不起作用，但我这是可能的。

有没有办法在Internet Explorer中更改背景颜色？

Answer 1

内联样式被视为具有比任何规则集更高的specificity。

覆盖它的唯一方法是在元素上更改它或使用an !important rule。

!important规则是一个解决方案的大锤，只能工作一次（如果你想再次覆盖，你就被卡住;没有双重！重要规则），所以改变样式属性值（最好完全取而代之的是样式表）是最好的选择。

如果您真的想使用!important，则语法为：

.mydiv {
    background:#f00 !important;
    color: #000;
}

Answer 2

这很简单。在您的规则样式后使用!important。这是一个例子：

.mydiv {background:#f00 !important; color: #000;}

网址：http://jsfiddle.net/msJxL/

对于Internet Explorer，请查看 How To Create an IE-Only Stylesheet | CSS-Tricks 。

Answer 3

使用!important进行此操作。它将覆盖其他CSS。请尝试以下代码：

.mydiv {background:#f00 !important; color: #000;}

Answer 4

使用此：

.mydiv {
     background: #f00 !important;
     /* This will increase the rule score */
     color: #000;
}

详细信息：Stack Overflow问题 How can I override inline styles with external CSS? 。

Answer 5

您可以使用CSS属性选择器：

 <style>
     div[style] {
        background: blue !important;
     }
 </style>

 <div style="background: red;">
     The inline styles.
 </div>