Home > Article > Web Front-end > How to use !important rules in CSS? (code example)
How to use !important rules in CSS? (code example)
- 青灯夜游Original
- 2019-02-20 09:56:134219browse
One of the best ways to learn how to code a website is to look at the source code of other websites and learn some useful techniques. When viewing the source code, you may see "!important" in the code; what does this mean? What is the use? The following article will take you through the !important rules, I hope it will be helpful to you.
!What are the important rules? how to use?
!important is a CSS rule used to increase the application priority of a specified CSS style rule; it is added to the end of a CSS value to give it more weight. [Video tutorial recommendation: CSS tutorial]
In CSS, style rules are applied to elements in a cascading manner. The higher the weight in the following list, the smaller the weight:
● Browser style: It is the default style declared by the web browser.
● User-declared styles: Custom styles set by users using browser options or modified through developer debugging tools.
● Style declared during development: It is the style declared by the website developer in the CSS style sheet.
● Developer-declared styles with !important rules.
● User style with !important rules.
!important rule usage example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#container{
width: 450px;
height: 200px;
font-size: 25px;
}
#example{
color:red !important;
}
#container #example{
color:pink;
}
</style>
</head>
<body>
<div id="container">
<div id="example">PHP中文网！</div>
</div>
</body>
</html>Rendering:
Example description:
In this example, we first have an include! The style of the important rule defines the text color of an element (#example) as red. Then we have another style that changes the text color of this element (#example) to pink. because! important statement, so the text color of the element (#example) is now red instead of pink. If we didn't use it! important, then the color will be pink.
When to use !important rules?
You should not use !important rules unless absolutely necessary; using !important rules will break the natural cascading effect of the style sheet, making the code difficult to maintain. However, there are some situations where you have to use it! important:
1. When testing and debugging the website, the !important rule is very useful.
If we have some CSS issues in our code and want to make sure a specific style is applied, we can use the !important rule to temporarily fix the problem on the site until we find a better way (which may take some time).
2. Output style sheet
!important rules can also be used for output style sheets to ensure that styles are applied without being overwritten by anything else.
Conclusion
Using !important has no negative impact on performance; but from the perspective of maintainability, unless absolutely necessary, use !important should be avoided as much as possible rule, it should only be used in special circumstances.
The above is the entire content of this article, I hope it will be helpful to everyone's study. For more exciting content, you can pay attention to the relevant tutorial columns of the PHP Chinese website! ! !
The above is the detailed content of How to use !important rules in CSS? (code example). For more information, please follow other related articles on the PHP Chinese website!