如何覆盖内联CSS样式

本文写于2009年，至今仍是我们最受欢迎的帖子之一。 如果您想了解有关CSS的更多信息，那么您可能会发现这篇有关CSS技术的文章对视网膜显示非常感兴趣。

CSS的最强大功能之一就是层叠。 知道浏览器如何选择和应用样式是非常宝贵的知识。 鉴于样式的使用受到包括CSS的方法，规则顺序，选择器的指定方式以及特殊声明（如!important ）的影响，新手特别容易感到困惑。

内联样式是HTML本身定义的样式，例如

<p>This is an 
<strong style="color: red;">inline style that should be blue</strong>
.</p>

内联样式在所有CSS中具有最高优先级。 通常，我建议您避免使用它们，并将CSS声明放置在外部文件中。 但是，如果您在旧系统上工作或无法直接访问HTML代码，则可能没有那么奢侈。

幸运的是， 有一种方法来覆盖从外部样式内嵌样式：

strong[style] { color: blue !important; }

在上面的示例中，这将强制strong标签中的文本变为蓝色。 该方法似乎可以在所有主流浏览器中使用，包括：

• Internet Explorer 8.0
• Mozilla Firefox 2和3
• 歌剧9
• Apple Safari，以及
• 谷歌浏览器

Internet Explorer 6和7是明显的例外。 但是，这种技术不是您每天都应该使用的技术。 保持CSS整洁，仅在绝对没有替代方法时才覆盖内联样式。

如果您喜欢阅读这篇文章，那么您会喜欢Learnable的 ； 向大师学习新鲜技能的地方。 会员可以立即访问所有SitePoint的电子书和交互式在线课程，例如实用CSS 。

本文的评论已关闭。 对CSS有疑问吗？ 为什么不在我们的论坛上提问呢？

From: https://www.sitepoint.com/override-inline-css/