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.

Was sind Klassen in CSS?

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.

Verwenden Sie mehrere Klassen für ein Element

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 RegelnKaskadeundSpezifitä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 dieletzteErwähnte im CSS-CodePriorität.Lassen Sie uns dies anhand eines Beispiels besser verstehen.BeispielAngenommen, Sie haben zwei Klassen in Ihrer CSS-Datei definiert.

   
  
 CSS Classes 
 
 Here, we have applied class1 to the div element. 
 
 Here, we have applied class2 to the div element. 
 
 This is an example. Here, we will apply both classes to the div element. 
  

im CSS-Code nach

deklariert wird, hat

Priorität. Wenn wir alsoclass1undclass2auf ein div-Element anwenden, basiert der Stil des div-Elements hauptsächlich aufclass2.Sie können jedoch sehen, dass Attribute, die nicht inclass2erwähnt werden, aber inclass1vorhanden sind, auf das div-Element angewendet werden. Genauso wie

inclass1erwähnt wird, aber nicht inclass2. Aber das letzte div-Element ist immer noch zentriert ausgerichtet. Dies liegt daran, dass die einzigen Eigenschaften inclass1unverä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 KlassenDie Reihenfolge der in HTML geschriebenen Klassen bestimmt nicht die Priorität. Betrachten Sie das folgende BeispielBeispiel< /p>

Angenommen, Sie definieren zwei Klassen ähnlich dem obigen Beispiel. Allerdings haben Sie die Reihenfolge der Klassen im HTML-Code geändert. Was wird Ihrer Meinung nach das Ergebnis sein? Wird es anders sein als vorher? Mal sehen.

   
  
 CSS Classes 
 
 This is an example. Here, we will apply first class1 and then class2 to the div element. 
 
 This is an example. Here, we will apply first class2 and then class1 to the div element. 
  

Wie Sie sehen, sind die Ergebnisse unverändert. Stile werden nur entsprechend der in CSS genannten Reihenfolge der Klassen angewendet.

CSS! Verwendung wichtiger Regeln

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; }

Wenn Sie das Schlüsselwort !important neben einer CSS-Eigenschaft verwenden, stellt der Compiler sicher, dass es auf dieses Element angewendet wird, unabhängig von einer bestimmten Reihenfolge der Stile. Schauen wir uns ein Beispiel an.

Eintreten

Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null

Beispiel

Da im folgenden Beispiel

vor

steht, wird der Stil basierend auf

des letzten div-Elements angewendet. Allerdings wird dieFarbedes Textes wie im Unterricht geschrieben„a“angewendet, was bedeutet, dass die Farbe des Textesrotist. Dies liegt daran, dass wir das Schlüsselwort!importantim Attributcolorin der Klasse"a" verwenden.

   
  
 !Important Rule 
 
 Here, we have applied only class "a" to the div element. 
 
 Here, we have applied only class "b" to the div element. 
 
 Here, we have applied both the classes to the div element. 
  

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!