Maison > Article > interface Web > Comment forcer l'augmentation de la priorité en CSS
Comment forcer l'augmentation de la priorité en CSS
- 青灯夜游original
- 2022-09-06 17:49:504493parcourir
En CSS, vous pouvez forcer une augmentation de priorité en définissant l'instruction "!important" ; cette instruction est utilisée pour augmenter la priorité d'application de la règle de style CSS spécifiée et sera ajoutée à la fin de la valeur de style CSS pour donner le style plus de poids, la syntaxe "selector{property:value!important;}". L'utilisation de règles "!important" brisera l'effet en cascade naturel des feuilles de style, rendant le code difficile à maintenir. Par conséquent, sauf nécessité absolue, l'utilisation de règles !important doit être évitée autant que possible et ne doit être utilisée que dans des circonstances particulières. .
L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.
En CSS, vous pouvez forcer l'augmentation de la priorité en définissant la déclaration "!important".
!déclaration importante
!important est utilisé pour augmenter la priorité d'application d'une règle de style CSS spécifiée ; il est ajouté à la fin de la valeur CSS pour lui donner plus de poids.
选择器{属性:值 !important;}Remarque : Attribut : valeur !important Les valeurs d'attribut peuvent être séparées par des espaces. 属性：值 !important 属性值用空格隔开即可。
在CSS中，样式规则以级联方式应用于元素。下面这个列表中越靠前的权重越小：
● 浏览器样式：是Web浏览器声明的默认样式。
● 用户声明的样式：是用户使用浏览器选项设置或通过开发人员调试工具修改的自定义样式。
● 开发中声明的样式：是网站开发人员在CSS样式表中声明的样式。
● 具有!important规则的开发者声明样式。
● 具有!important规则的用户样式。
!important为开发者提供了一个增加样式权重的方法，比直接在元素的 style 属性中设置 CSS 声明还要高， 一般用在 CSS 覆盖 JavaScript设置上。
示例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>测试!Important</title>
</head>
<style type="text/css">
#Box div
{
color: red;
}
.important_false
{
color: blue;
}
.important_true
{
color: blue !important;
}
</style>
<body>
<div id="Box">
<div class="important_false">
这一行末使用important</div>
<div class="important_true">
这一行使用了important</div>
</div>
</body>
</html>效果图：
CSS代码第一行设定了box里面所有div中字体色为红色，第二行和第三行都用class重新定义了自身div的字体色为蓝色，
不同的是，第二行未使用!important，而第三行使用了!
总结：
第一行字体颜色是红色，可以证明，css样式设置中，id的优先级大于class，这行字还是红色。
第二行字体颜色是蓝色，可以证明，!important的优先级最高，important_true的css样式生效，这行字变为了蓝色！
什么时候用!important规则？
除非绝对必要，否则不应使用!important规则；使用!important规则会打破了样式表的自然级联效果，使得代码难以维护。但是，在某些情况下你必须使用！important：
1、在测试和调试网站时，!important规则是非常有用的。
如果我们的代码中存在一些CSS问题，并且希望确保应用特定的样式，则可以使用!important规则在网站上临时修复问题，直到找到更好的方法（可能需要一些时间） 。
2、输出样式表
!important规则也可用于输出样式表，以确保应用样式而不被其他任何内容覆盖。
结论
使用!important对于性能并没有什么负面影响；但是从可维护性角度考虑，除非绝对必要，应尽可能的避免使用!important规则，它应该只在特殊情况下使用。
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注php中文网相关教程栏目！！！
特别说明：
!important
.testClass{
color:blue !important;
color:red;
}🎜Rendu : 🎜🎜🎜🎜La première ligne de code CSS définit la couleur de police de tous les divs de la boîte sur rouge, et les deuxième et troisième lignes utilisent la classe pour redéfinir la couleur de police de leurs propres divs sur bleu, 🎜 🎜Le La différence est que !important n'est pas utilisé dans la deuxième ligne, mais !important est utilisé dans la troisième ligne 🎜🎜Résumé : 🎜🎜La couleur de la police de la première ligne est rouge. Il peut être prouvé que dans le paramètre de style CSS, la priorité de l'identifiant est supérieure à la classe. Le texte est toujours rouge. 🎜🎜La couleur de police de la deuxième ligne est bleue. Il peut être prouvé que !important a la priorité la plus élevée. Le style CSS de important_true prend effet et cette ligne de texte devient bleue ! 🎜🎜🎜🎜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. . 🎜🎜Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il pourra être utile à l’étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! ! 🎜🎜🎜🎜Remarque : 🎜🎜🎜🎜!important n'est pas reconnu dans IE6, par exemple : 🎜.testClass{
color:blue !important;
}
.testClass{
color:red;
}🎜Cette méthode d'écriture n'est pas reconnue dans IE6, .testCalss est affiché en dernier en rouge, mais vous pouvez également le faire reconnaître par IE6 en changeant la méthode d'écriture important🎜rrreee🎜 (Partage de vidéos d'apprentissage : 🎜développement web front-end🎜)🎜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!