Cascading Style Sheets (CSS) ist eine leistungsstarke Komponente der Webentwicklung, die es Entwicklern ermöglicht, das visuelle Erscheinungsbild ihrer Websites zu bestimmen. In CSS dienen Klassen als Selektoren, die es uns ermöglichen, mehrere spezifische Stile auf ein Element anzuwenden. Sie können auch mehrere Klassen für bestimmte Elemente verwenden.
Wenn Sie jedoch mehrere Klassen auf ein Element anwenden, müssen Sie wissen, wie Sie die Renderreihenfolge dieser Klassen festlegen, um Diskrepanzen und unerwartete Ergebnisse zu vermeiden. In diesem Artikel besprechen wir die verschiedenen Möglichkeiten, die Klassenreihenfolge in CSS festzulegen, sowie die Bedeutung von Spezifitäts- und Kaskadenregeln zur Bestimmung von Prioritäten.
In CSS sind Klassen Selektoren, mit denen ein bestimmter Stilsatz auf HTML-Elemente angewendet wird. Dabei handelt es sich um leistungsstarke Tools, die es uns ermöglichen, Elemente zu gruppieren und die Konsistenz über mehrere Elemente auf einer Webseite hinweg aufrechtzuerhalten. Es ermöglicht uns, CSS-Stile in vielen Elementen einer großen Website wiederzuverwenden.
Wenn Sie in CSS eine Reihe von Klassen definieren, können Sie diese für ein bestimmtes Element kombinieren, um es einzigartig und attraktiv zu machen. Sie müssen jedoch die Reihenfolge der Klassen angeben, damit der Compiler den Code reibungslos ausführt und die Ausgabe entsprechend Ihren Anforderungen bereitstellt. Dies geschieht über die Regeln Kaskade und Spezifität.
Die Reihenfolge, in der wir Klassen in einer CSS-Datei definieren, wird verwendet, um ihre Priorität zu bestimmen, wenn mehrere Klassen auf ein Element angewendet werden. Dies liegt daran, dass CSS „kaskadierend“ ist, was bedeutet, dass der Compiler es vom „letzten nach oben“ und von „von rechts nach links“ liest. Daher erhält die letzte Erwähnte im CSS-Code Priorität. Lassen Sie uns dies anhand eines Beispiels besser verstehen.
Beispiel
Angenommen, Sie haben zwei Klassen in Ihrer CSS-Datei definiert.
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1"> Here, we have applied class1 to the div element. </div>
<div class="class2"> Here, we have applied class2 to the div element. </div>
<div class="class1 class2"> This is an example. Here, we will apply both classes to the div element. </div>
</body>
</html>
deklariert wird, hat
class2Priorität. Wenn wir also class1 und class2 auf ein div-Element anwenden, basiert der Stil des div-Elements hauptsächlich auf class2. Sie können jedoch sehen, dass Attribute, die nicht in class2 erwähnt werden, aber in class1 vorhanden sind, auf das div-Element angewendet werden. Genauso wie
text-align: centerin class1 erwähnt wird, aber nicht in class2. Aber das letzte div-Element ist immer noch zentriert ausgerichtet. Dies liegt daran, dass die einzigen Eigenschaften in class1 unverändert auf das Element angewendet werden. Für Eigenschaften, die in beiden Klassen gleich sind, verwendet der Compiler jedoch kaskadierende Regeln, um sie darzustellen. Reihenfolge der Klassen Die Reihenfolge der in HTML geschriebenen Klassen bestimmt nicht die Priorität. Betrachten Sie das folgende Beispiel Beispiel< /p>
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1 class2"> This is an example. Here, we will apply first class1 and then class2 to the div element. </div>
<div class="class2 class1"> This is an example. Here, we will apply first class2 and then class1 to the div element. </div>
</body>
</html>
Wie Sie sehen, sind die Ergebnisse unverändert. Stile werden nur entsprechend der in CSS genannten Reihenfolge der Klassen angewendet.
In CSS ermöglicht die !important-Regel Entwicklern, die kaskadierende Reihenfolge von Stilen zu überschreiben und sicherzustellen, dass der spezifische erforderliche Stil die höchste Priorität erhält.
Grammatik
selector{
property: value !important;
}
Eintreten
Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null
Da im folgenden Beispiel
b des letzten div-Elements angewendet. Allerdings wird die Farbe des Textes wie im Unterricht geschrieben „a“ angewendet, was bedeutet, dass die Farbe des Textes rot ist. Dies liegt daran, dass wir das Schlüsselwort !important im Attribut color in der Klasse "a" verwenden.
<html>
<head>
<style>
* {
margin: 10px;
padding: 2px;
}
.a {
color: red !important;
letter-spacing: 1px;
text-shadow: 2px 2px 2px grey;
font-size: 16px;
font-family: Calibri;
}
.b {
color: blue;
letter-spacing: 1px;
font-size: 20px;
font-family: Georgia;
}
</style>
</head>
<body>
<h1> !Important Rule </h1>
<div class="a"> Here, we have applied only class "a" to the div element. </div>
<div class="b"> Here, we have applied only class "b" to the div element. </div>
<div class="a b"> Here, we have applied both the classes to the div element. </div>
</body>
</html>
Das obige ist der detaillierte Inhalt vonWie lege ich die Reihenfolge der Klassen mit CSS fest?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
403verbotene Lösung
die Funktionsnutzung
So lösen Sie das Problem der fehlenden ssleay32.dll
So stellen Sie den IE-Browser wieder her, um automatisch zu EDGE zu springen
Wie lösche ich den Speicherplatz für WPS-Cloud-Dokumente, wenn er voll ist?
Verwendung des Schlüsselworts Type in Go
So installieren Sie WordPress nach dem Herunterladen
So lösen Sie die Zeitüberschreitung
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
