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

  • Z时代
  • 2024-01-10
  • 分类：问答

我有使用内联样式的标记，但是我无权更改此标记。如何仅使用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 */
}

回答：

覆盖内联样式的唯一方法是使用!importantCSS规则旁边的关键字。以下是一个示例。

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关键字添加到任何CSS规则后，该规则就可以 于该元素的 。

  • 它甚至会覆盖 标记中的内联样式。

  • 覆盖的唯一方法是使用另一条!important规则，该规则在CSS中具有较高的CSS特定性声明，或者在代码后期具有相等的CSS特定性声明。

以上是 如何使用外部CSS覆盖内联样式？ 的全部内容， 来源链接： utcz.com/qa/432140.html

回到顶部