Maison >interface Web >Questions et réponses frontales >Comment forcer l'augmentation de la priorité en CSS
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 : 🎜🎜
!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!