Summary of how to use !important in CSS-CSS Tutorial-php.cn

Summary of how to use !important in CSS

黄舟

Release： 2017-07-27 11:30:02

Original

2470 people have browsed it

The following is a brief introduction to one of the more important !important attributes in CSS. The following two points are summarized from the author's practice:

1. Used to solve IE's deviation from certain CSS specifications. The situation.

For example, the effect in IE is always 2px different from other browsers such as Firefox, Opera, etc., causing the page layout to be misaligned. This is caused by a bug in IE's interpretation of the distance between boxes. Yes, we can use !important to help solve this situation.

For example, the following style

.myclass{
 margin-left:20px!important;
 margin-left:40px;

}

Copy after login

If it is in firefox, opera, and chrome, these browsers support the !important attribute, which means that they will default to margin-left:20px!important; This statement takes effect, and the following styles without !important declaration will not override it. In other words, it has the highest level, and no one below can replace me!

But what will happen if you switch to IE browser? Because IE does not support !important, that is to say, IE does not know what this sentence means, so the stupid IE skips this sentence. Yes, he knew the one below, so margin-left:40px;
took effect.

Speaking of this, one thing needs to be noted:

It does not mean that IE really does not know !important. If you just want to use !important to distinguish IE from other browsers, then you are wrong. For example:

.myclass{
backgroud-color:black !important;
}

Copy after login

We thought that this style is not recognized by IE, and we can customize it for display in other browsers. Is that really the case? really not! IE also recognized it.

Are you a little confused when it comes to this? Does IE recognize it? ? ?

The answer is very simple. It can only be used when two styles with the same name appear at the same time, like the following.

.myclass{
 margin-left:20px!important;
 margin-left:40px;

}

Copy after login

2. If there is a style A defined, such as font-size, if you don’t want it to be overwritten by style A in the future, you can also use !important. And if the new style also uses !important, it will still be forced to overwrite it

.A{
 font-size:12px !important;
}
.A{
 font-size:14px;   //不会生效
}

.A{
 font-size:14px !important; //生效
}

Copy after login

Note , it must be a style with the same name, that is, the style name is called A. If it is a parent and a child, it will not work. For example:

<html>
<head>
<style>
.father{
font-size:12px !important;
}
.child{
font-size:14px;
}
</style>
<body>
<div class="father">
 <div class="child">I am child </div>
</div>
</body>
</html>

Copy after login

In this case, the child font-size is 14px and is not affected by father.

The above is the detailed content of Summary of how to use !important in CSS. For more information, please follow other related articles on the PHP Chinese website!