Klassenauswahl in CSS

Klassenauswahl in CSS

CSS bietet mehrere Möglichkeiten, um das Erscheinungsbild eines Elements zu ändern. CSS -Selektoren sind eine davon. Selektoren ermöglichen es uns, ein HTML -Element anzusprechen und einen Stil unserer Wahl für jedes HTML -Element anzugeben.

In CSS gibt es fünf Kategorien von Selektoren i.e. Einfache, Kombinator, Pseudoklasse, Pseudo-Element und Attributauswahl. Dieses Schreiben enthält einen detaillierten Überblick über einen der einfachen Selektoren I.e. Klassenauswahl und diskutieren die folgenden Terminologien im Zusammenhang mit Klassenauswahl:

  • Was ist ein Klassenauswahl
  • Grundlegende Syntax des Klassenwählers
  • So verwenden Sie Klassenauswahl
  • So verwenden Sie Klassenauswahl für bestimmte HTML -Elemente

Beginnen wir diese Diskussion mit der grundlegenden Definition des Klassenauswahl:

Klassenauswahl in CSS

Ein Klassenauswahls zielt auf das Element (n) mit bestimmten Klassennamen (en) ab. Die folgende Syntax bietet Ihnen mehr Klarheit über den Klassenauswahl.

Syntax

Die grundlegende Syntax beginnt mit einem Punkt “.”Gefolgt vom Klassennamen, der darstellt, dass es sich um einen Klassenwählers handelt.


In der obigen Abbildung “."Zeigt, dass es sich um einen CSS -Klassenauswahl handelt,„ Stil “repräsentiert den Klassennamen.

So verwenden Sie den CSS -Klassenwählers

Der CSS -Klassenwähler kann verwendet werden, um den Stil einiger spezifischer HTML -Elemente festzulegen.

Beispiel

Schauen wir uns den untergegebenen Code an und verwendet den Klassenauswahl.






CSS -Klassenauswahl


Erster Paragraph


Zweiter Absatz



Der oben genannte Code verwendet zwei Klassenauswahlern. Der

und zuerst

Element verwendet dieselbe Klasse, sodass der gleiche Stil implementiert wird, während der zweite

Element wird anders gestaltet:

So verwenden Sie den CSS -Klassenwählers für bestimmte HTML -Elemente

Wir können den CSS -Klassenauswahl verwenden, um bestimmte HTML -Elemente zu beeinflussen. Zu diesem Zweck müssen wir den Namen des Elements vor dem Punkt angeben “.”, Wie in der folgenden Abbildung gezeigt:


Die obige Abbildung beschreibt, die alle auswählen

Elemente mit dem Klassennamen "Stil" und setzen Sie die Hintergrundfarbe als blau.

Beispiel

In diesem Beispiel wird die Style1 -Klasse angegeben

Und

Elemente. Jedoch nur

Elemente mit dem Klassenattribut „Style1“ können auf die Styling -Eigenschaften von Style1 und auf die Styling -Eigenschaften zugreifen

Das Element bleibt unklug.






CSS -Klassenauswahl


Erster Paragraph


Zweiter Absatz



Ausgang

So implementieren Sie mehrere Stile im HTML -Element

Als HTML -Element kann in seinem Klassenattribut mehrere Klassennamen haben, damit wir unterschiedliche Styling basierend auf den Klassennamen anwenden können.

Beispiel

Im folgenden Code wird der erste Absatz die Eigenschaften beider Stilklassen implementieren.






CSS -Klassenauswahl


Erster Paragraph


Zweiter Absatz



Das obige Code generiert die folgende Ausgabe:


Die Ausgabe überprüft, dass der erste Absatz die Eigenschaften beider Klassen 'Style' und 'style1' verwendet.

Abschluss

Ein Klassenwähler wählt das HTML -Element für das Styling in CSS unter Verwendung seines Klassennamens aus und beginnt mit einem Punkt “.”Gefolgt vom Klassennamen. Dieses Schreiben enthält einen umfassenden Überblick und ein Kernkonzept von CSS-Klassenauswahlern, die Verwendung von Klassenauswahlern, die Verwendung eines Klassenauswahl.