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

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

Copier après la connexion

Dans ce cas, la taille de police de l'enfant est de 14 pixels et n'est pas affectée par le père.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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