CSS :nth-of-type() 伪类
- τη προηγούμενη σελίδα :nth-last-of-type()
- Επόμενη σελίδα :only-child
- Επιστροφή στο προηγούμενο επίπεδο Εγχειρίδιο Σημειώσεων Πseudo-Klass CSS
定義和用法
CSS :nth-of-type(n)
ψευδοτυπογράφος χρησιμοποιείται για να ταιριάζει με το στοιχείο που είναι το n στοιχείων.
n μπορεί να είναι ένας αριθμός/ευρετηρία, μια λέξη-κλειδί (παράξενος
ή ζεϊνός
) ή μια εξίσωση (όπως an + b)
Συμβουλή:Δείτε :nth-child()
ψευδοτυπογράφος χρησιμοποιείται για να επιλέξει το στοιχείο που είναι ο n στοιχείων, ανεξάρτητα από τον τύπο τους.
Παράδειγμα
Παράδειγμα 1
Πώς να χρησιμοποιήσετε :nth-of-type()
Δημιουργία:
/* Επιλέγει το δεύτερο στοιχείο αδελφών στοιχείων div */ div:nth-of-type(2) { background: red; } /* Επιλέγει το δεύτερο στοιχείο li της λίστας */ li:nth-of-type(2) { background: φωτεινή πράσινη; } /* Επιλέγει κάθε τρίτο στοιχείο ενός ομίλου αδελφών στοιχείων */ :nth-of-type(3) { background: yellow; }
Παράδειγμα 2
παράξενος
και ζεϊνός
είναι λέξη-κλειδί, μπορεί να χρησιμοποιηθεί για να ταιριάζει με το στοιχείο που έχει παράξενο ή ζεϊνός ευρετηρία (το ευρετηρία του πρώτου στοιχείου είναι 1).
Εδώ, καθορίζουμε διαφορετικά χρώματα παρασκηνίου για τα στοιχεία <p> με παράξενο και ζεϊνός ευρετηρία:
p:nth-of-type(odd) { background: red; } p:nth-of-type(even) { background: blue; }
Παράδειγμα 3
χρησιμοποιώντας την εξίσωση (an + b) Περιγραφή:a προσδιορίζει αποκλειστική μετατόπιση, n είναι όλα τα μη αρνητικά ακέραια από 0.b είναι αποκλειστική μετατόπιση.
Εδώ, καθορίζουμε το χρώμα του παρασκηνίου για όλα τα στοιχεία <p> με ευρετηρία 3 ή πολλαπλάσιο του 3 (θα επιλέξει τον τρίτο, τον έκτο, τον 第九ο κ.λπ. στοιχεία):
p:nth-of-type(3n+0) { background: red; }
Παράδειγμα 4
Εδώ, καθορίζουμε το χρώμα του παρασκηνίου για όλα τα στοιχεία <p> με ευρετηρία 3 ή πολλαπλάσιο του 3. Μετά από 1 (θα επιλέξει τον δεύτερο, τον πέμπτο, τον όγδοο κ.λπ. στοιχεία):
p:nth-of-type(3n-1) { background: red; }
Γλώσσα CSS
:nth-of-type(index |奇数|ζεϊνός| an+b) { deklaracje css; }
Τεχνικά λεπτομέρειες
Έκδοση: | CSS3 |
---|
Υποστήριξη προγράμματος περιήγησης
Τα αριθμήματα στην τάβλη αναφέρονται στην πρώτη έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τον ψευδοτυπογράφο.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
- τη προηγούμενη σελίδα :nth-last-of-type()
- Επόμενη σελίδα :only-child
- Επιστροφή στο προηγούμενο επίπεδο Εγχειρίδιο Σημειώσεων Πseudo-Klass CSS