Was nützt das n-te Kind?

So verwenden Sie nth-child: 1. Um eine gerade Anzahl von Elementen auszuwählen, können Sie nth-child(even) verwenden. 2. Um eine ungerade Anzahl von Elementen auszuwählen, können Sie nth-child(odd) verwenden Um ein Element an einer bestimmten Position auszuwählen, können Sie einen bestimmten Positionsindex verwenden. 4. Um einen bestimmten Bereich von Elementen auszuwählen, können Sie Folgendes verwenden: nth-child(-n+3) {font-weight:bold;}.

nth-child ist ein Pseudoklassenselektor in CSS, der zum Auswählen untergeordneter Elemente an bestimmten Positionen im übergeordneten Element verwendet wird. In diesem Artikel stellen wir die Verwendung von nth-child und einige gängige Anwendungsszenarien vor.

1. Grundlegende Syntax

Die Syntax für das n-te Kind lautet wie folgt:

父元素:nth-child(n)

Unter diesen stellt das übergeordnete Element das auszuwählende übergeordnete Element und n die Position des auszuwählenden untergeordneten Elements dar.

Hinweis: Die Positionen werden ab 1 gezählt.

2. Anwendungsbeispiele

Im Folgenden stellen wir die Verwendung von nth-child anhand einiger konkreter Beispiele vor.

1. Wählen Sie eine gerade Anzahl von Elementen aus

Wenn Sie alle untergeordneten Elemente mit gerader Nummer unter dem übergeordneten Element auswählen möchten, können Sie nth-child(even) verwenden.

Um beispielsweise alle Zeilen mit geraden Nummern in einer Liste auszuwählen, können Sie den folgenden Code verwenden:

li:nth-child(even) {
background-color: #ccc;
}

2 Elemente mit ungeraden Nummern auswählen

Wenn Sie alle untergeordneten Elemente mit ungeraden Nummern unter dem übergeordneten Element auswählen möchten , können Sie nth-child(odd) verwenden.

Um beispielsweise alle ungeraden Zeilen in einer Tabelle auszuwählen, können Sie den folgenden Code verwenden:

tr:nth-child(odd) {
background-color: #ccc;
}

3 Elemente an bestimmten Positionen auswählen

Wenn Sie nur untergeordnete Elemente an einer bestimmten Position unter dem übergeordneten Element auswählen möchten Element können Sie einen bestimmten Positionsindex verwenden.

Zum Beispiel:

Um das erste Element in der Liste auszuwählen, können Sie Folgendes verwenden:

li:nth-child(1) {
color: red;
}

Um das letzte Element in der Liste auszuwählen, können Sie Folgendes verwenden:

li:nth-child(n):last-child {
color: blue;
}

4. Wählen Sie einen bestimmten Bereich von Elementen aus

nth -child auch Sie können Formeln verwenden, um einen Bereich von Elementen auszuwählen.

Zum Beispiel:

Um die ersten drei untergeordneten Elemente unter einem übergeordneten Element auszuwählen, können Sie Folgendes verwenden:

nth-child(-n+3) {
font-weight: bold;
}

Um die letzten fünf untergeordneten Elemente unter einem übergeordneten Element auszuwählen, können Sie Folgendes verwenden:

nth-child(n+6):nth-child(-n+10) {
font-style: italic;
}

3. Notizen

Bei der Verwendung von nth-child sind mehrere Dinge zu beachten:

1 Das übergeordnete Element muss ein Element desselben Typs sein. nth-child kann nur untergeordnete Elemente desselben Typs auswählen. Beispielsweise können das erste Div und der erste Span unter einem übergeordneten Element nicht ausgewählt werden.

2. Die Reihenfolge der Pseudoklassenselektoren ist wichtig. Wenn der Selektor für das n-te Kind mehrmals im selben Stylesheet verwendet wird, überschreiben nachfolgende Regeln die vorherigen Regeln.

3. Das n-te Kind beginnt bei 1 zu zählen, nicht bei 0. Dies unterscheidet sich von der Art und Weise, wie in einigen Programmiersprachen gezählt wird. Bitte beachten Sie den Unterschied.

4. Zusammenfassung

nth-child ist ein leistungsstarker CSS-Selektor. Durch die Verwendung verschiedener Positionsparameter können Sie untergeordnete Elemente an bestimmten Positionen im übergeordneten Element auswählen. Unabhängig davon, ob es darum geht, Elemente an einer bestimmten Position oder Elemente innerhalb eines bestimmten Bereichs auszuwählen, kann uns das n-te Kind dabei helfen, dies schnell zu erreichen.

Sie müssen jedoch bedenken, dass die Verwendung von nth-child bestimmten Regeln entsprechen muss, insbesondere muss das übergeordnete Element ein Element desselben Typs sein. Ich hoffe, dass dieser Artikel Ihnen hilft, nth-child richtig zu verstehen und zu verwenden. .

Das obige ist der detaillierte Inhalt vonWas nützt das n-te Kind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!