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

发布于05月29日

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

推荐答案

覆盖内联样式的唯一方法是在CSS规则旁边使用!important关键字.以下是其中的一个示例.

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>

重要提示:

Using 100 is not considered as a good practice.因此，您应该同时避免使用!important和内联样式.

将关键字!important添加到任何CSS规则将允许该元素的规则forcefully precede over all the other CSS rules.

它甚至从加价中得到了overrides the inline styles英镑.

The only way to override is by using another 100 rule，在CSS中声明为具有更高的CSS专一性，或者在代码中稍后声明为等同的CSS专有.

Must Read - 100