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

Question

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

下面是我的HTML代码：

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

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

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

但这个方法不起作用，但我认为这是可能的。

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

- avi

Answer 1

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

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

!important规则是一个大锤式的解决方案，只能起作用一次（如果你想再次覆盖，你就会卡住；没有双重 !important 规则），因此改变样式属性值（最好是完全删除它，采用样式表）是最好的选择。

如果你真的想使用!important，那么语法是：

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

- Quentin

Answer 2

这很简单。在你的规则样式后面使用！important。以下是例子：

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

链接: http://jsfiddle.net/msJxL/

对于Internet Explorer，可以参考CSS-Tricks | 如何创建仅适用于IE的样式表.

- Vipul

---

请告诉我如何在单个样式表中更改颜色，您发送给我的链接是用于外部CSS，我必须将其附加到我的文档中，但问题是我无法编辑我的HTML文档。 - avi

检查一下你的拼写，@Vipul...应该是“simple”，而不是“simpale”...既然这是被接受的答案，我认为让它更清晰一些会更好。 - sulfureous

Answer 3

使用!important来实现。它将覆盖其他CSS。尝试以下代码：

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

- Dhaval Bharadva

Answer 4

使用这个：

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

详细信息：Stack Overflow问题如何使用外部CSS覆盖内联样式？。

- Rohit Agrawal

Answer 5

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

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

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

- shakthydoss

---

属性选择器与此无关。 - Quentin