我有使用内联样式的标记，但我没有访问权限更改此标记。如何在文档中仅使用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>
Important Notes:
Using
!importantis not considered as a good practice. Hence,you should avoid!importantand inline style both.Adding
!importantkeyword to any CSS rule forces the rule to forcefully precedes over all the other CSS rule for that element.It even overrides the inline styles from the markup.
Only way to override is by using another
!importantrule,declared either with higher CSS Specificity in the CSS or equal CSS Specificity later in the code.Must Read – 07000
