Heim > Artikel > Web-Frontend > Wie verwende ich !important-Regeln in CSS? (Codebeispiel)
Wie verwende ich !important-Regeln in CSS? (Codebeispiel)
- 青灯夜游Original
- 2019-02-20 09:56:134246Durchsuche
Eine der besten Möglichkeiten, das Codieren einer Website zu lernen, besteht darin, sich den Quellcode anderer Websites anzusehen, um einige nützliche Tipps zu erhalten. Beim Betrachten des Quellcodes sehen Sie möglicherweise „!important“ im Code; was bedeutet das? Was ist der Nutzen? Der folgende Artikel führt Sie durch die !important-Regeln und ich hoffe, er ist hilfreich für Sie.
Was sind die wichtigen Regeln? Wie benutzt man es?
!important ist eine CSS-Regel, die verwendet wird, um die Anwendungspriorität einer bestimmten CSS-Stilregel zu erhöhen. Sie wird am Ende eines CSS-Werts hinzugefügt, um ihm mehr Gewicht zu verleihen. [Video-Tutorial-Empfehlung: CSS-Tutorial]
In CSS werden Stilregeln kaskadierend auf Elemente angewendet. Je höher die Gewichtung in der folgenden Liste, desto kleiner die Gewichtung:
● Browserstil: Dies ist der vom Webbrowser deklarierte Standardstil.
● Vom Benutzer deklarierter Stil: Es handelt sich um einen benutzerdefinierten Stil, der vom Benutzer mithilfe von Browseroptionen festgelegt oder durch Debugging-Tools des Entwicklers geändert wird.
● Während der Entwicklung deklarierter Stil: Es handelt sich um den Stil, der vom Website-Entwickler im CSS-Stylesheet deklariert wurde.
● Vom Entwickler deklarierte Stile mit !important-Regeln.
● Benutzerstile mit !important-Regeln.
!wichtiges Regelverwendungsbeispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#container{
width: 450px;
height: 200px;
font-size: 25px;
}
#example{
color:red !important;
}
#container #example{
color:pink;
}
</style>
</head>
<body>
<div id="container">
<div id="example">PHP中文网！</div>
</div>
</body>
</html>Rendering:
Beispielbeschreibung:
In diesem Beispiel haben wir zuerst ein include! Der Stil der wichtigen Regel definiert die Textfarbe eines Elements (#example) als Rot. Dann haben wir einen anderen Stil, der die Textfarbe dieses Elements (#example) in Pink ändert. Weil! Wichtige Aussage, daher ist die Textfarbe des Elements (#example) jetzt rot statt rosa. Wenn wir es nicht genutzt hätten! wichtig, dann wird die Farbe rosa sein.
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. In manchen Fällen müssen Sie es jedoch verwenden! 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 möglicherweise der Fall ist). etwas Zeit in Anspruch nehmen).
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 jedoch so weit wie möglich vermieden werden, es sei denn, dies ist unbedingt erforderlich. In der Regel sollte es nur unter besonderen Umständen 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! ! !
Das obige ist der detaillierte Inhalt vonWie verwende ich !important-Regeln in CSS? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!