Que signifie important en CSS ?

En CSS, important signifie « important » ou « faisant autorité » et est utilisé pour augmenter la priorité d'application des règles de style CSS spécifiées ; il sera ajouté à la fin de la valeur de style CSS pour donner plus de poids au sélecteur de syntaxe. {style:valeur!important;}". L'utilisation de règles importantes n'a aucun impact négatif sur les performances ; cependant, du point de vue de la maintenabilité, sauf nécessité absolue, vous devez éviter d'utiliser des règles importantes autant que possible, et elles ne doivent être utilisées que dans des circonstances particulières.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

En CSS, important signifie « important » ou « faisant autorité ».

important est une règle CSS utilisée pour augmenter la priorité d'application d'une règle de style CSS spécifiée ; elle est ajoutée à la fin d'une valeur CSS pour lui donner plus de poids.

Syntaxe :

选择器{样式:值!important;}

important fournit aux développeurs un moyen d'augmenter le poids du style. Il convient de noter que !important est une déclaration de l'ensemble du style, y compris les attributs et les valeurs d'attribut de ce style.

En CSS, les règles de style sont appliquées aux éléments en cascade. Plus le poids est élevé dans la liste suivante, plus le poids est petit :

• Style du navigateur : C'est le style par défaut déclaré par le navigateur web.

• Styles déclarés par l'utilisateur : sont des styles personnalisés définis par l'utilisateur à l'aide des options du navigateur ou modifiés via les outils de débogage du développeur.
  

• Styles déclarés en développement : sont des styles déclarés par les développeurs de sites Web dans des feuilles de style CSS.
  

• Styles déclarés par le développeur avec des règles !importantes.
  

• Styles utilisateur avec !règles importantes.

　La fonction de !important est d'augmenter la priorité de l'attribut de style spécifié.

Généralement, lorsque nous définissons des attributs de style pour le même élément, nous définissons deux valeurs ou même plus pour le même attribut, comme suit :

p { /* 例1 */
color:red;
color:yellow;
color:blue;
}

À ce moment, les attributs déclarés plus tard prennent effet et la police est affiché en couleur bleue.

Supposons que nous voulions que j'écrive comme ci-dessus, mais que je souhaite que la police finale effective soit affichée en rouge, alors nous pouvons définir la couleur rouge, important :

p { /* 例2 */
     color:red !important;    /* 设置了优先级 */
     color:yellow;
     color:blue;
}

Ensuite, la police sera affichée en rouge ! temps.

S'il y a plusieurs attributs de style définis sur !important, comme ce qui suit :

p { /* 例3 */
     color:green !important;
     color:red !important;
     color:yellow !important;
     color:blue;
}

Ensuite, ce sera toujours le même que lorsqu'il n'est pas défini, et le dernier déclaré prendra effet, ce qui signifie que le la couleur effective finale dans l'exemple ci-dessus est le jaune.

Nous savons que plus le sélecteur CSS est spécifique, plus la priorité est élevée, par exemple :

 
     <style> 
        p.p1 { color:blue; } 
        p { color:red; }
     </style>
 

    <p>p标签</p>

Au final, l'élément

Si nous définissons !important sur color:red;

 
    <style>
        p.p1 { color:blue; }
        p { color:red !important; }    /* 设置了优先级 */
    </style>



    <p>p标签</p>

Au final, l'élément

Et si cet élément

    <style>
        p { color:red !important; }
    </style>


    <p>p标签</p>

Enfin, l'élément

En d’autres termes, l’attribut style déclaré !important remplacera toute autre déclaration.

Quand utiliser les règles !importantes ?

Vous ne devez pas utiliser les règles !important sauf en cas d'absolue nécessité ; l'utilisation de règles !important brisera l'effet en cascade naturel de la feuille de style, rendant le code difficile à maintenir. Cependant, dans certains cas, vous devez l'utiliser ! important :

1. Lors du test et du débogage du site Web, la règle !important est très utile.

Si nous rencontrons des problèmes CSS dans notre code et que nous voulons nous assurer qu'un style spécifique est appliqué, nous pouvons utiliser la règle !important pour résoudre temporairement le problème sur le site jusqu'à ce que nous trouvions une meilleure solution (ce qui peut prendre un certain temps) .

2. Feuille de style de sortie

 ! Des règles importantes peuvent également être utilisées pour produire des feuilles de style afin de garantir que les styles sont appliqués sans être écrasés par quoi que ce soit d'autre.

Conclusion

L'utilisation de !important n'a aucun impact négatif sur les performances ; mais du point de vue de la maintenabilité, sauf nécessité absolue, l'utilisation des règles !important doit être évitée autant que possible, et elle ne doit être utilisée que dans des cas particuliers. .

dans Internet Explorer !important

　　但在IE 6及更早的版本中，不支持我们这种写法。像例3，在IE5（我用的是IE11然后再控制台中切换到IE5的方式模拟的，IE11没有模拟IE6，凑合凑合_(:з」∠)_）中运行效果是这样的：

　　

　　没错，最终它还是显示为蓝色，!important被忽略了。让我们换一种写法：

p { color:blue; }
p { color:yellow; }
p { color:red !important; }/* 设置了优先级 */

　　这个时候就可以显示为红色了：

　　

　　再看看这个例子：

p { color:blue; }
p { 
   color:red !important;    /* 设置了优先级 */
   color:yellow;
}

　　在模拟IE5的浏览器中运行效果如下：

　　

个人理解：IE6及更早版本的IE浏览器中运行!important就好比说"大家都是针对这个元素设置的样式，color样式请优先使用我这个CSSRule对象（被{}包裹起来的一些样式属性）中的color样式"，而不是说"就使用我指定的color样式"。

（学习视频分享：web前端入门）

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!