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

使用外部 CSS 覆盖内联样式

使用包含内联样式的 HTML 标记时，您可能会遇到需要覆盖这些样式的情况使用外部 CSS 的样式。但是，应用常规 CSS 规则可能并不总是按预期工作。

要有效覆盖内联样式，您可以在 CSS 规则中使用 !important 关键字。此关键字为规则添加了更高的优先级，即使存在内联样式，它也能生效。

例如，请考虑以下 HTML 标记：

<div>
<p>如果您尝试使用 CSS 规则覆盖 div 元素的内联样式：</p>
<pre class="brush:php;toolbar:false">div {
    color: blue;
}

内联样式不会被覆盖。为了确保内联样式被覆盖，请使用 !important 关键字：

div {
    color: blue !important;
}

通过将 !important 添加到规则中，可以赋予它比内联样式更高的优先级。因此，div 元素中的文本现在将呈现为蓝色，即使内联样式显式将颜色设置为红色。