Home > Article > Web Front-end > Summary of how to use !important in CSS

Summary of how to use !important in CSS

黄舟Original: 2017-07-27 11:30:022410browse

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;

}

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;
}

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;

}

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; //生效
}

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS: !important use code sharingNext article：CSS: !important use code sharing

See more

Summary of how to use !important in CSS

Related articles