CSS -Selektoren
Fragen Sie sich, wie CSS -Selektoren funktionieren? Kein Problem! Dieser Artikel zeigt ein detailliertes Verständnis der CSS -Selektoren mit Beispielen. Beginnen wir zuerst mit der Syntax:
Syntax
Die Syntax zum Schreiben eines CSS-Selektors wird im untergegebenen Snippet angezeigt:
Hier ist „P“ der Selektor, der die Farbe des Absatzes in Grün umwandelt.
Arten von CSS -Selektoren
CSS bietet verschiedene Arten von Selektoren, die jeder Typ unterschiedliche Funktionen besitzt. In diesem Artikel werden die folgenden Typen behandelt:
- Elementauswahl
- Klassenauswahl
- ID -Selektor
- Gruppierungswähler
- Universeller Selektor
Elementauswahl
In CSS die Elementauswahl wird verwendet, um die HTML -Elemente gemäß ihrem Namen abzuzielen.
Der folgende Code implementiert beispielsweise schwarze Hintergrundfarbe mit grüner Textfarbe für alle Absätze mit Element Selector:
Selektoren
Frontendentwicklung
Backend -Entwicklung
Die untergegebene Ausgabe zeigt die Arbeit des CSS-Element-Selektors:
Klassenauswahl
Der CSS -Klassenwähltektor wird verwendet, um die HTML -Elemente mit spezifischem Klassennamen zu zielen. Die Syntax des Klassenwählers umfasst einen Zeitraum (.) gefolgt vom Klassennamen.
.ClassName CSS-Property: WertIn der obigen Syntax "ClassName" befindet sich ein Klassenauswahl.
Betrachten wir ein Beispiel, das die Überschrift und die Absatzelemente mit dem Klassenauswahl ansprechen, wie im folgenden Code gezeigt:
Selektoren
Frontendentwicklung
Backend -Entwicklung
In diesem Beispiel “.Style ”ist Klassenauswahl, der einige Eigenschaften angibt. Im Körperabschnitt
, und beide
Elemente haben den Klassennamen "Stil".
Der folgende Snippet zeigt die Ausgabe des oben genannten Code -Snippets an:
ID -Selektor
In CSS die ID -Selektor zielt auf die HTML -Elemente basierend auf dem ID -Attribut ab. Das Hash -Zeichen (#), gefolgt von der ID des Elements, wird für die verwendet ID -Selektor.
Betrachten wir ein Beispiel, das den angegebenen Stil im HTML -Element mit ID = „Stil“ implementiert, wie unten gezeigt:
Selektoren
Frontendentwicklung
Backend -Entwicklung
Der auf der implementierte ID -Selektor
Das Element liefert die folgende Ausgabe:
Jetzt müssen Sie überlegen, was der Unterschied zwischen dem ID -Selektor und dem Klassenauswahl ist?
ID ist eine eindeutige Kennung, was bedeutet. Wenn wir die gleiche ID zweimal in einem Dokument verwenden, wendet das CSS das Styling auf das neueste an. Während Unterricht großartige Klassifikatoren sind, sind sie in der Natur nicht einzigartig.
Gruppierungswähler
Der Gruppierungswählte -Selektor zielt auf mehrere Elemente mit demselben Stil. Der Gruppierungswähler verwendete ',' zwischen mehreren Selektoren.
Betrachten wir ein Beispiel, das das gleiche Styling mit den mehreren Elementen implementiert, wie im folgenden Snippet gezeigt:
Selektoren
Frontendentwicklung
Backend -Entwicklung
Dies ist eine Fußzeile
Die folgende Ausgabe bestätigt, dass der Gruppierungswähler das gleiche Styling angewendet hat
und Elemente:
Universeller Selektor
Der Universeller Selektor Implementiert das Styling für alle Elemente des Dokuments. Ein "*" -Schild wird verwendet, um den Universal Selector zu implementieren. Beispielsweise wendet der folgende Code den angegebenen Stil auf alle HTML -Elemente an:
Selektoren
Frontendentwicklung
Backend -Entwicklung
Dies ist eine Fußzeile
Der obige Code implementiert das gesamte Dokument. Infolgedessen erhalten wir die folgende Ausgabe:
Abschluss
CSS -Selektoren finden/abzielen die HTML -Elemente und implementieren einige Styling -Eigenschaften auf ihnen. Es gibt zahlreiche Arten von CSS-Selektoren, dieses Artikel deckte einige von ihnen wie Element Selector und Klassenauswahl ab, basierend auf dem Elementnamen und dem Klassennamen des Elements. Jeder Typ führt unterschiedliche Funktionen wie ID -Selektor aus, die auf der ID des Elements eine Aktion basieren und die Selektor gruppieren auf die Mehrfachelemente, der universelle Selektor beeinflusst das gesamte Dokument usw.