CSS !important Rules
What is !important
The !important rule in CSS is used to increase the weight of styles.
!important has nothing to do with priority, but it is directly related to the final result. When an !important rule is used, this statement will override any other statement.
Example
#myid { background-color: blue; } .myclass { background-color: gray; } p { background-color: red !important; }
In the above example, although the ID selector and the class selector have higher priority, the background colors of the three paragraphs are all displayed in red because the !important rule will override the background-color property.
Important
Using !important is a bad habit and should be avoided as much as possible, because it breaks the inherent cascade rules in the style sheet and makes it more difficult to debug and find bugs.
When two conflicting declarations with the !important rule are applied to the same element, the declaration with the higher priority will be adopted.
In the following example, when we look at the CSS source code, we are not very clear about which color is the most important:
Example
#myid { background-color: blue !important; } .myclass { background-color: gray !important; } p { background-color: red !important; }
Suggestions:
Be sure to give priority to using the priority of style rules to solve the problem instead of
!important
Only use (!important) in specific pages that need to cover the entire site or external CSS
Never use it (!important) in your plugin
Never use it (!important) in site-wide CSS codes
When to use !important
If you want to set a site-wide CSS style on your website, you can use !important.
For example, we want to make all buttons on the website have the same style:
Example
.button {
background-color: #9a9a9a;
color: white;
padding: 5px;
border: 1px solid black;
}
If we put the button in another element with a higher priority, the appearance of the button will change, and the attributes will conflict, as in the following example:
Example
.button { background-color: #8c8c8c; color: white; padding: 5px; border: 1px solid black; } #myDiv a { color: red; background-color: yellow; }
If we want to set all buttons to have the same appearance, we can add the !important rule to the button's style attribute, as shown below:
Example
.button { background-color: #8c8c8c !important; color: white !important; padding: 5px !important; border: 1px solid black !important; } #myDiv a { color: red; background-color: yellow; }