Heim > Artikel > Web-Frontend > So erzwingen Sie eine Erhöhung der Priorität in CSS
So erzwingen Sie eine Erhöhung der Priorität in CSS
- 青灯夜游Original
- 2022-09-06 17:49:504493Durchsuche
In CSS können Sie eine Erhöhung der Priorität erzwingen, indem Sie die Anweisung „!important“ festlegen. Diese Anweisung wird verwendet, um die Anwendungspriorität der angegebenen CSS-Stilregel zu erhöhen, und wird am Ende des CSS-Stilwerts hinzugefügt der Stil mehr Gewicht, die Syntax „selector{property:value!important;}“. Die Verwendung von „!important“-Regeln unterbricht den natürlichen Kaskadeneffekt von Stylesheets, was die Wartung des Codes erschwert. Daher sollte die Verwendung von „!important“-Regeln so weit wie möglich vermieden und nur unter besonderen Umständen verwendet werden .
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
In CSS können Sie eine Erhöhung der Priorität erzwingen, indem Sie die Anweisung „!important“ setzen.
!important-Deklaration
!important wird verwendet, um die Anwendungspriorität einer bestimmten CSS-Stilregel zu erhöhen; sie wird am Ende des CSS-Werts hinzugefügt, um ihm mehr Gewicht zu verleihen.
选择器{属性:值 !important;}Hinweis: Attribut: Wert !important Attributwerte können durch Leerzeichen getrennt werden. 属性：值 !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;
}🎜Rendering: 🎜🎜🎜🎜Die erste Zeile des CSS-Codes setzt die Schriftfarbe aller Divs im Feld auf Rot, und die zweite und dritte Zeile verwenden Klasse, um die Schriftfarbe ihrer eigenen Divs auf Blau umzudefinieren, 🎜 🎜The Der Unterschied besteht darin, dass !important nicht in der zweiten Zeile, sondern !important in der dritten Zeile verwendet wird. 🎜🎜Zusammenfassung: 🎜🎜Die Schriftfarbe der ersten Zeile ist nachweislich rot. Die Priorität der ID ist größer als die der Klasse. Der Text ist immer noch rot. 🎜🎜Die Schriftfarbe der zweiten Zeile ist blau. Es kann bewiesen werden, dass !important die höchste Priorität hat. Der CSS-Stil von important_true wird wirksam und diese Textzeile wird blau. 🎜🎜🎜🎜Wann sind !important-Regeln anzuwenden? 🎜🎜🎜🎜Sie sollten keine !important-Regeln verwenden, es sei denn, die Verwendung von !important-Regeln unterbricht den natürlichen Kaskadeneffekt des Stylesheets und erschwert die Wartung des Codes. Es gibt jedoch Situationen, in denen Sie es verwenden müssen! wichtig: 🎜🎜🎜1. Beim Testen und Debuggen der Website🎜 ist die !important-Regel sehr nützlich. 🎜🎜Wenn wir CSS-Probleme in unserem Code haben und sicherstellen möchten, dass ein bestimmter Stil angewendet wird, können wir die !important-Regel verwenden, um das Problem vorübergehend auf der Website zu beheben, bis wir einen besseren Weg finden (was einige Zeit dauern kann) . 🎜🎜🎜2. Ausgabe-Stylesheet🎜🎜🎜! Wichtige Regeln können auch für die Ausgabe von Stylesheets verwendet werden, um sicherzustellen, dass Stile angewendet werden, ohne dass sie durch etwas anderes überschrieben werden. 🎜🎜🎜Fazit🎜🎜🎜Die Verwendung von !important hat keine negativen Auswirkungen auf die Leistung; aus Sicht der Wartbarkeit sollte die Verwendung von !important-Regeln jedoch so weit wie möglich vermieden und nur in Sonderfällen verwendet werden . 🎜🎜Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! ! 🎜🎜🎜🎜Besonderer Hinweis: 🎜🎜🎜🎜!important wird in IE6 nicht erkannt, zum Beispiel: 🎜.testClass{
color:blue !important;
}
.testClass{
color:red;
}🎜Diese Schreibmethode wird in IE6 nicht erkannt, .testCalss wird zuletzt rot angezeigt, aber Sie können IE6 auch dazu bringen, es zu erkennen, indem Sie die Schreibmethode ändern! Wichtig🎜rrreee🎜 (Lernvideo-Sharing: 🎜Web-Front-End-Entwicklung🎜)🎜Das obige ist der detaillierte Inhalt vonSo erzwingen Sie eine Erhöhung der Priorität in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!