So verwenden Sie den CSS-Selektor

Der CSS-Selektor (Cascading Style Sheet) ist ein Tool zum Auswählen von HTML-Elementen. Mit CSS-Selektoren können Sie HTML-Elemente basierend auf Typ, Attribut, ID oder Klasse formatieren. Selektoren sind die Grundlage von CSS und ihre Beherrschung ist ein wichtiger Schritt bei der Beherrschung von CSS.

In diesem Artikel werden häufig verwendete CSS-Selektoren und deren Verwendung vorgestellt. Bevor Sie beginnen, müssen Sie einige Grundkenntnisse verstehen:

1. CSS-Selektorsyntax: Der Selektor zeigt auf das HTML-Element, gefolgt von einem Paar geschweifter Klammern {}. Innerhalb der geschweiften Klammern befindet sich eine Reihe von Attribut- und Wertepaaren. durch Semikolons getrennt.
2. HTML-Elemente können Tag-Namen, Klassennamen (ID) und Attribute als Selektoren verwenden.
3. Elemente können mehrere Klassennamen haben, getrennt durch Leerzeichen.
4. ID- und Klassennamen müssen den Benennungsregeln entsprechen, z. B. dürfen nicht mit einer Zahl beginnen, dürfen keine Sonderzeichen enthalten usw.

Lassen Sie uns nun mehr über verschiedene CSS-Selektoren und deren Verwendung erfahren.

1. Tag-Selektor

Der Tag-Selektor ist der einfachste CSS-Selektor. Es verwendet den Tag-Namen des HTML-Elements, um den Stil festzulegen. Der Tag-Selektor gilt für alle Elemente dieses Tags.

Um beispielsweise die rote Textfarbe für alle Absätze (p) festzulegen, können Sie den folgenden Code verwenden:

p {
  color: red;
}

2. Klassenselektor

Der Klassenselektor wählt Elemente aus, indem er den Klassennamen im Tag hinzufügt. Klassennamen beginnen mit dem Symbol „.“

Zum Beispiel setzt der folgende Code die Textfarbe für alle Elemente, die den Klassennamen „my-class“ verwenden, auf Rot:

.my-class {
  color: red;
}

In HTML kann das Klassenattribut auf jedes Element angewendet werden. Hier ist ein Beispiel:

<div class="my-class">我是一个含有my-class类名的div元素</div>

3. ID Selector

ID Selector wählt Elemente aus, indem es einen ID-Namen in das Tag einfügt. Der ID-Name beginnt mit dem „#“-Symbol.

Der folgende Code setzt beispielsweise die Textfarbe eines Elements mit der ID „my-id“ auf Blau:

#my-id {
  color: blue;
}

In HTML kann das id-Attribut nur auf ein einzelnes Element angewendet werden. Hier ist ein Beispiel:

<div id="my-id">我是一个含有my-id ID名称的div元素</div>

4. Attribute Selector

Attribute Selector legt Stile basierend auf den Attributen eines HTML-Elements fest. Sie ermöglichen den Zugriff auf die Attribute eines Elements mithilfe von eckigen Klammern [].

Der folgende Code setzt beispielsweise die Textfarbe für alle Elemente mit dem „href“-Attribut auf Grün:

a[href] {
  color: green;
}

Außerdem können Sie den Attributwert verwenden, um den Stil detaillierter zu gestalten. Der folgende Code setzt beispielsweise die Textfarbe für alle Links auf Rot, deren „href“-Attributwert mit „.pdf“ endet:

a[href$=".pdf"] {
  color: red;
}

Im obigen Code gibt das „$="-Symbol an, dass der Attributwert mit endet einen bestimmten Wert.

5. Descendant Selector

Descendant Selector legt Stile fest, indem er untergeordnete Elemente eines übergeordneten Elements auswählt. Es verwendet Leerzeichen, um die einzelnen Tag-Namen zu trennen.

Zum Beispiel setzt der folgende Code das a-Element in allen div-Elementen auf grün:

div a {
  color: green;
}

Im obigen Code verbindet das Leerzeichen das div-Element und das a-Element miteinander.

6. Intersection Selector

Der Intersection Selector wählt Elemente mit dem angegebenen Klassennamen und Tag-Namen aus. Es wird mit „.“ und dem Tag-Namen definiert.

Zum Beispiel setzt der folgende Code die Textfarbe für alle Elemente, die einen „my-class“-Klassennamen und einen „li“-Tagnamen haben, auf Blau:

li.my-class {
  color: blue;
}

Im obigen Code ist „li.my- Nur der Selektor „class“ Gilt für Elemente mit den Klassennamen „li“ und „my-class“.

Zusammenfassung:

Bisher haben wir etwas über 6 häufig verwendete CSS-Selektoren gelernt. Wenn Sie Selektoren verstehen, können Sie HTML-Elemente besser positionieren und Stile entwickeln. Unterschiedliche Selektoren erfordern unterschiedliche HTML-Strukturen, daher müssen wir den geeigneten Selektor entsprechend den tatsächlichen Anforderungen auswählen.

CSS-Selektoren sind ein sehr wichtiger Wissenspunkt in CSS, und ihre Beherrschung ist ein sehr wichtiger Schritt für Front-End-Entwickler. Ich hoffe, dieser Artikel kann Ihnen helfen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den CSS-Selektor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!