Résumé de l'utilisation de !important en CSS-tutoriel CSS-php.cn

Résumé de l'utilisation de !important en CSS

黄舟

Libérer： 2017-07-27 11:30:02

original

2588 Les gens l'ont consulté

Ce qui suit est une brève introduction à l'un des attributs !importants les plus importants en CSS. Les deux points suivants sont résumés de la pratique de l'auteur :

1 Utilisé pour résoudre l'écart d'IE par rapport à certaines spécifications CSS.

Par exemple, l'effet dans IE est toujours différent de 2 pixels par rapport aux autres navigateurs tels que Firefox, Opera, etc., ce qui entraîne un mauvais alignement de la mise en page. Cela est dû à un bug dans l'interprétation par IE de la distance entre. cases Oui, nous pouvons utiliser !important pour aider à résoudre cette situation.

Par exemple, le style suivant

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

Copier après la connexion

S'il est dans Firefox, Opera et Chrome, ces navigateurs prennent en charge l'attribut !important, ce qui signifie qu'ils définiront la marge gauche : 20px par défaut ! important ; Cette instruction prend effet, et les styles suivants sans la déclaration !important ne la remplaceront pas. En d'autres termes, elle a le niveau le plus élevé, et personne ci-dessous ne peut me remplacer !

Mais que se passera-t-il si vous passez au navigateur IE ? Parce qu'IE ne prend pas en charge !important, c'est-à-dire qu'IE ne sait pas ce que signifie cette phrase, donc le stupide IE saute cette phrase. connaissait celui ci-dessous, donc margin-left:40px;
a pris effet.

En parlant de cela, une chose doit être notée :

Cela ne veut pas dire qu'IE ne sait vraiment pas !important Si vous voulez simplement utiliser !important pour distinguer IE de. d'autres navigateurs, alors vous vous trompez. Par exemple :

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

Copier après la connexion

Nous avons pensé à l'improviste que ce style n'est pas reconnu par IE et nous pouvons le personnaliser pour l'afficher dans d'autres navigateurs. Est-ce vraiment le cas ? Pas vraiment! IE l'a également reconnu.

Êtes-vous un peu confus à ce sujet ? Est-ce que IE le reconnaît ? ? ?

La réponse est très simple. Cela ne peut être utilisé que lorsque deux styles portant le même nom apparaissent en même temps, comme suit.

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

Copier après la connexion

2. défini , comme font-size, si vous ne souhaitez pas qu'il soit écrasé par le style A à l'avenir, vous pouvez également utiliser !important Et si le nouveau style utilise également !important, il sera toujours forcé de remplacer <. 🎜>

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

Copier après la connexion

Notez qu'il doit s'agir d'un style portant le même nom, c'est-à-dire un style avec les deux noms de style appelé A. Cela ne fonctionnera pas s'il s'agit d'un parent et d'un enfant, par exemple :

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