How to use!important declaration to enforce precedence in CSS

!important Declaration Enforcement priority

There is also one of the most invincible declarations in CSS precedence, which is!important.

In a CSS style sheet, a style with a!important declaration takes precedence, and its precedence goes beyond any style declaration in any way, including the style declared in the inline style property.

For example, the following code:

<style type= "Text/css" > p{color:red!important;}  </style> <p style= "Color:blue; "> This is a line of text </p>

This line of text still appears in the browser as a red font.

Therefore, the precedence of CSS style matching follows the following order:

(1)!important statement above all.

(2) The embedded style is the second.

(3) The style sheet declares the sort by the weight of the selector.

(4) Finally, according to the order of the browser execution style sheet, follow the "catch up" principle to match the style.

Of course, the last thing to emphasize is that if you don't set a style, the style of the parent node is automatically inherited.