CSS :nth-child() ψευδοκλάση

Ορισμός και χρήση

CSS :nth-child(n)}} ψευδοκλάση χρησιμοποιείται για να ταιριάζει στο στοιχείο που είναι ως το γονέα του n στοιχείων του.

η ψευδοκλάση αυτή ταιριάζει στο στοιχείο βασισμένο στον δείκτη του στοιχείου στη λίστα των παιδιών του γονέα του.

n μπορεί να είναι ένας αριθμός/δείκτης, μια λέξη-κλειδί (παράγοντες ή όμοιοι) ή μια εξίσωση (όπως an + b)

Σημείωση:Δείτε :nth-of-type() ψευδοκλάση χρησιμοποιείται για να επιλέξει το στοιχείο που είναι ως το στοιχείο του γονέα τουσυμμετρικά (όνομα ετικέτας)του n στοιχείων του.

Παράδειγμα

Παράδειγμα 1

Πώς να χρησιμοποιηθεί :nth-child() ψευδοκλάση:

/* Επιλέγει κάθε τέταρτο στοιχείο του συνόλου των αδελφών στοιχείων */
:nth-child(4) {
  χρώμα παρασκηνίου: κίτρινο;
}
/* Επιλέγει τον δεύτερο στοιχείο των αδελφών στοιχείων div */
div:nth-child(2) {
  χρώμα 배경: κόκκινο;
}
/* Επιλέγει τον δεύτερο στοιχείο της λίστας */
li:nth-child(2) {
  χρώμα παρασκηνίου: πράσινο;
}

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 2

παράγοντες και όμοιοι είναι λέξη-κλειδί, μπορεί να χρησιμοποιηθεί για να ταιριάζει στοιχεία με αδιαίρετο ή όμοιο δείκτη (ο δείκτης του πρώτου στοιχείου είναι 1).

Εδώ, καθορίζουμε το χρώμα του παρασκηνίου για τα στοιχεία <p> με αδιαίρετο και όμοιο δείκτη:

p:nth-child(παράγοντες) {
  χρώμα 배경: κόκκινο;
}
p:nth-child(όμοιοι) {
  παρασκηνίδι: πράσινο;
}

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 3

χρησιμοποιώντας την εξίσωση (an + b) Περιγραφή:a προσδιορίζει ένα αριθμητικό βήμα, το n είναι όλα τα μηδενικά αριθμητικά ακέραια που ξεκινούν από το 0,b είναι αποκλειστικός αριθμητικός μεταστάθμισμα.

Εδώ, καθορίζουμε το χρώμα του παρασκηνίου για όλα τα στοιχεία <p> με δείκτη 3 πολλαπλάσιο (θα επιλέξουμε τον τρίτο, τον έκτο, τον δέκατο κ.λπ.):

p:nth-child(3n+1) {
  χρώμα 배경: κόκκινο;
}

Προσπάθησε να το δοκιμάσεις!

Παράδειγμα 4

Εδώ, καθορίζουμε το χρώμα του παρασκηνίου για όλα τα στοιχεία <p> με δείκτη 3 πολλαπλάσιο. Μετά τοίς αφαιρούμε 1 (θα επιλέξουμε τον πρώτο, τον τέταρτο, τον έβδομο κ.λπ.):

p:nth-child(3n-1) {
  χρώμα 배경: κόκκινο;
}

Προσπάθησε να το δοκιμάσεις!

Γλωσσή CSS

:nth-child(index | παράγοντες | όμοιοι | an+b) {
  καταχώρισεις css;
}

Τεχνικά λεπτομέρειες

Υποστήριξη περιηγητή

Τα αριθμήματα στη τаблицή υποδεικνύουν την πρώτη έκδοση του περιηγητή που υποστηρίζει πλήρως τον πίνακα.