Υπάρχει ένας τέτοιος επιλογέας, πιο συγκεκριμένα μια ψευδο-κλάση, που ονομάζεται :nth-child . Ακολουθεί ένα παράδειγμα χρήσης του:
UL LI:nth-child(3n+3) ( χρώμα:#CCC; )
Τι κάνει το παραπάνω CSS; Επιλέγει κάθε τρίτο στοιχείο μέσα λίστα με κουκκίδες: αυτό είναι το 3ο, 6ο, 9ο, 12ο κ.λπ. Ας δούμε πώς ακριβώς λειτουργεί αυτή η έκφραση και τι άλλο μπορεί να γίνει με το :nth-child .
Όλα εξαρτώνται από το τι βρίσκεται ανάμεσα στις αγκύλες. Ο επιλογέας :nth-child δέχεται δύο λέξεις-κλειδιά: άρτιο και περιττό . Είναι απλό: άρτια επιλέγει άρτια στοιχεία όπως 2ο, 4ο, 6ο κ.λπ., και το μονό επιλέγει περιττά στοιχεία, όπως 1ο, 3ο, 5ο κ.λπ. δ.
Όπως μπορείτε να δείτε από το πρώτο παράδειγμα, το :nth-child δέχεται επίσης εκφράσεις ως παράμετρο. Συμπεριλαμβανομένων των απλούστερων εξισώσεων, με άλλα λόγια, μόνο αριθμών. Εάν τα βάλετε σε αγκύλες, θα επιλεγεί μόνο ένα στοιχείο με τον αντίστοιχο αριθμό. Για παράδειγμα, δείτε πώς να επιλέξετε μόνο το πέμπτο στοιχείο:
UL LI:nth-child(5) ( χρώμα:#CCC; )
Ωστόσο, ας επιστρέψουμε στο 3n+3 από το πρώτο παράδειγμα. Πώς λειτουργεί και γιατί επιλέγεται κάθε τρίτο στοιχείο; Το όλο κόλπο είναι στην κατανόηση της μεταβλητής n και της μειωμένης αλγεβρικής εξίσωσης. Σκεφτείτε το n ως ένα μηδενικό σύνολο ακεραίων. Στη συνέχεια συμπληρώστε την εξίσωση. Άρα το 3n είναι 3×n και ολόκληρη η εξίσωση μαζί είναι (3×n)+3. Τώρα, αντικαθιστώντας αριθμούς μεγαλύτερους ή ίσους με μηδέν αντί για n, παίρνουμε:
- (3 × 0) + 3 = 3 = 3ο στοιχείο
- (3 × 1) + 3 = 6 = 6ο στοιχείο
- (3 × 2) + 3 = 9 = 9ο στοιχείο κ.λπ.
Τι γίνεται με: nth-child(2n+1) ;
- (2 × 0) + 1 = 1 = 1ο στοιχείο
- (2×1) + 1 = 3 = 3ο στοιχείο
- (2 × 2) + 1 = 5 = 5ο στοιχείο κ.λπ.
Ναι, σταματήστε! Είναι το ίδιο με το περίεργο. Τότε ίσως δεν πρέπει να χρησιμοποιήσετε αυτήν την έκφραση; Αλλά δεν περιπλέκουμε υπερβολικά το πρώτο μας παράδειγμα σε αυτή την περίπτωση; Τι γίνεται αν αντί για 3n+3 γράψουμε 3n+0 ή ακόμα πιο απλό 3n ;
- (3 × 0) = 0 = τίποτα
- (3 × 1) = 3 = 3ο στοιχείο
- (3 × 2) = 6 = 6ο στοιχείο
- (3 × 3) = 9 = 9ο στοιχείο, κ.λπ.
Έτσι, όπως μπορείτε να δείτε, το αποτέλεσμα είναι το ίδιο, πράγμα που σημαίνει ότι δεν υπάρχει ανάγκη για +3 . Μπορούμε να χρησιμοποιήσουμε αρνητικές τιμές του n εξίσου καλά με την αφαίρεση στις εξισώσεις. Για παράδειγμα, 4n-1:
- (4 × 0) - 1 = -1 = τίποτα
- (4 × 1) - 1 = 3 = 3ο στοιχείο
- (4 × 2) - 1 = 7 = 7ο στοιχείο, κ.λπ.
Η χρήση -n μπορεί να φαίνεται περίεργη - εάν το τελικό αποτέλεσμα είναι αρνητικό, τότε δεν θα συμπεριληφθούν στοιχεία στην επιλογή. Αλλά αν συμπληρώσετε την εξίσωση και κάνετε ξανά το αποτέλεσμα θετικό, τότε το δείγμα θα αποδειχθεί αρκετά ενδιαφέρον: με αυτό μπορείτε να πάρετε τα πρώτα n στοιχεία, για παράδειγμα ως εξής: -n + 3:
- –0 + 3 = 3 = 3ο στοιχείο
- –1 + 3 = 2 = 2ο στοιχείο
- -2 + 3 = 1 = 1ο στοιχείο
- -3 + 3 = 0 = τίποτα, κ.λπ.
Το SitePoint έχει έναν ωραίο οδηγό με μια ωραία πινακίδα, τον οποίο θα δημοσιεύσω χωρίς ντροπή εδώ:
| n | 2n+1 | 4n+1 | 4n+4 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 1 | 1 | 4 | – | – | 3 |
| 1 | 3 | 5 | 8 | 4 | 3 | 2 |
| 2 | 5 | 9 | 12 | 8 | 8 | 1 |
| 3 | 7 | 13 | 16 | 12 | 13 | – |
| 4 | 9 | 17 | 20 | 16 | 18 | – |
| 5 | 11 | 21 | 24 | 20 | 23 | – |
Υποστήριξη προγράμματος περιήγησης
Ο επιλογέας :nth-child είναι ένας από τους λίγους επιλογείς CSS που υποστηρίζεται σχεδόν πλήρως σύγχρονα προγράμματα περιήγησηςκαι δεν υποστηρίζεται απολύτως στον IE, ούτε καν στον IE8. Έτσι, όταν πρόκειται να το χρησιμοποιήσετε και το τελικό αποτέλεσμα είναι η προοδευτική βελτίωση, μπορείτε να το χρησιμοποιήσετε με ασφάλεια για ορισμένα τυπογραφικά στοιχεία, όπως ο χρωματισμός σειρών πίνακα. Ωστόσο, δεν πρέπει να χρησιμοποιείται σε πιο σοβαρές περιπτώσεις. Για παράδειγμα, βασιστείτε σε αυτό στη διάταξη του ιστότοπου ή αφαιρέστε το δεξί περιθώριο από κάθε τρίτο μπλοκ σε ένα πλέγμα τρία προς τρία, ώστε να χωρούν στη σειρά.
Οι ψευδο-κλάσεις μπορούν να χρησιμοποιηθούν για την επιλογή ενός συγκεκριμένου στοιχείου από μια λίστα. Σε αυτό το σεμινάριο, θα μιλήσουμε για την ψευδο-τάξη :nth-child, τι μπορείτε να δημιουργήσετε με αυτήν την ψευδο-κλάση και πώς μπορεί να είναι χρήσιμη. Η ψευδο-κλάση :nth-child σάς επιτρέπει να επιλέξετε μια ομάδα στοιχείων με κοινές ιδιότητες. Χρησιμοποιείται πιο συχνά για την επιλογή ζυγών ή περιττών στοιχείων από μια ομάδα. Συχνά χρησιμοποιείται για να κάνει το τραπέζι να μοιάζει με ζέβρα δίνοντας διαφορετικά χρώματα φόντου σε μονές και ζυγές σειρές.
tr:nth-child (μονό) ( // χρώμα φόντου ) tr:nth-child (ζυγό) ( // άλλο χρώμα φόντου )
Η ψευδο-κλάση :nth-child σάς επιτρέπει επίσης να διαιρέσετε στοιχεία με μια κοινή ιδιότητα σε ομάδες και στη συνέχεια να επιλέξετε ένα συγκεκριμένο στοιχείο από κάθε ομάδα χρησιμοποιώντας την ακόλουθη σύνταξη:
Tr:nth-child (an+b) ( )
Εδώ ένακαθορίζει τον αριθμό των στοιχείων στην ομάδα και σικαθορίζει ποιο στοιχείο από την ομάδα θα επιλεγεί. Εάν χρησιμοποιήσετε την τιμή 2n+1, τότε τα στοιχεία θα χωριστούν σε ομάδες των δύο και θα επιλεγούν τα πρώτα στοιχεία κάθε ομάδας, δηλαδή στοιχεία με περιττό τακτικό αριθμό. Εάν χρησιμοποιήσετε την τιμή 2n+2, τότε τα στοιχεία θα χωριστούν και πάλι σε ομάδες των δύο, αλλά τώρα θα επιλεγούν τα δεύτερα στοιχεία κάθε ομάδας, δηλαδή στοιχεία με ζυγό σειριακό αριθμό.
Ως παράδειγμα για να κατανοήσουμε την ψευδοτάξη :nth-child, θα επιλέξουμε κάθε τέταρτο στοιχείο με αυτό, δηλαδή το τέταρτο, το όγδοο, το δωδέκατο, το δέκατο έκτο, κ.λπ. Για να γίνει αυτό, θα χωρίσουμε τα στοιχεία σε ομάδες των τεσσάρων και στη συνέχεια επιλέξτε κάθε τέταρτο στοιχείο.
Tr:nth-child (4n+4 ) ( // στυλ κάθε τέταρτο στοιχείο )
Παρακάτω είναι μια λίστα με δέκα στοιχεία και θα χρησιμοποιήσουμε τις ψευδοτάξεις :nth-child , :first-child και :last-child για να επιλέξουμε τα στοιχεία που θέλουμε να επισημάνουμε.
Χρησιμοποιώντας το CSS:nth-child Pseudo-Class για να επιλέξετε ένα μεμονωμένο στοιχείο
Ορίζοντας την ψευδο-τάξη :nth-child ως αριθμό, μπορείτε να επιλέξετε σε ποιο παιδί της ομάδας θα αναφερθείτε:
Στοιχείο 1
Στοιχείο 2
Στοιχείο 3
Στοιχείο 4
Στοιχείο 5
Στοιχείο 6
Στοιχείο 7
Στοιχείο 8
Στοιχείο 9
Στοιχείο 10
#selector_example li:nth-child (4 ) ( μέγεθος γραμματοσειράς: 150
Χρησιμοποιώντας το CSS:nth-child Pseudo-Class για να επιλέξετε όλα τα στοιχεία εκτός από τα πρώτα πέντε
Εάν ορίσετε την ψευδοκλάση :nth-child σε μια τιμή της φόρμας n+αριθμός, μπορείτε να επιλέξετε όλα τα στοιχεία, ξεκινώντας από το στοιχείο με αυτόν τον τακτικό αριθμό:
Στοιχείο 1
Στοιχείο 2
Στοιχείο 3
Στοιχείο 4
Στοιχείο 5
Στοιχείο 6
Στοιχείο 7
Στοιχείο 8
Στοιχείο 9
Στοιχείο 10
#selector_example li:nth-child (n+6 ) ( μέγεθος γραμματοσειράς: 150 %; font-weight:bold ; χρώμα:πράσινο; )
Χρησιμοποιώντας το CSS:nth-child Pseudo-Class για να επιλέξετε μόνο τα πρώτα πέντε στοιχεία
Όταν ορίσουμε την ψευδοκλάση :nth-child σε αρνητική τιμή n+αριθμός, επιλέγουμε όλα τα στοιχεία που βρίσκονται πριν από το στοιχείο με αυτόν τον τακτικό αριθμό:
Στοιχείο 1
Στοιχείο 2
Στοιχείο 3
Στοιχείο 4
Στοιχείο 5
Στοιχείο 6
Στοιχείο 7
Στοιχείο 8
Στοιχείο 9
Στοιχείο 10
#selector_example li:nth-child (-n+5 ) ( μέγεθος γραμματοσειράς: 150 %; font-weight:bold ; χρώμα:πράσινο; )
Χρησιμοποιώντας το CSS:nth-child Pseudo-Class για να επιλέξετε κάθε τρίτο στοιχείο
Η ψευδοκλάση :nth-child μπορεί να χρησιμοποιηθεί για την επιλογή μιας ακολουθίας στοιχείων καθορίζοντας πόσα στοιχεία υπάρχουν στην ακολουθία και σειριακός αριθμόςεπιθυμητό στοιχείο. Εάν ορίσετε την τιμή 3n+1, θα επιλεγεί κάθε τρίτο στοιχείο, ξεκινώντας από το πρώτο:
Στοιχείο 1
Στοιχείο 2
Στοιχείο 3
Στοιχείο 4
Στοιχείο 5
Στοιχείο 6
Στοιχείο 7
Στοιχείο 8
Στοιχείο 9
Στοιχείο 10
#selector_example li:nth-child (3n+1 ) ( μέγεθος γραμματοσειράς: 150 %; font-weight:bold ; χρώμα:πράσινο; )
Χρησιμοποιώντας το CSS:nth-child Pseudo-Class για επιλογή μόνο περιττών στοιχείων
Μπορείτε να ορίσετε την ψευδοκλάση :nth-child σε μονό για να επιλέξετε όλα τα στοιχεία με περιττούς τακτικούς αριθμούς. Δηλαδή το πρώτο, τρίτο, πέμπτο, έβδομο, ένατο κ.λπ. στοιχεία. Αυτό είναι πολύ βολικό για τη ρύθμιση χρωμάτων για παρακείμενες σειρές τραπεζιών.
Στοιχείο 1
Στοιχείο 2
Στοιχείο 3
Στοιχείο 4
Στοιχείο 5
Στοιχείο 6
Στοιχείο 7
Στοιχείο 8
Στοιχείο 9
Στοιχείο 10
#selector_example li:nth-child (μονό) ( μέγεθος γραμματοσειράς: 150 %; font-weight:bold ; χρώμα:πράσινο; )
Χρησιμοποιώντας το CSS:nth-child Pseudo-Class για επιλογή μόνο ζυγών στοιχείων
Αυτό το παράδειγμα δείχνει το ίδιο με το προηγούμενο, αλλά αυτή τη φορά επιλέγονται όλα τα ζυγά στοιχεία. Δηλαδή το δεύτερο, τέταρτο, έκτο, όγδοο, δέκατο κ.λπ. στοιχεία:
Στοιχείο 1
Στοιχείο 2
Στοιχείο 3
Στοιχείο 4
Στοιχείο 5
Στοιχείο 6
Στοιχείο 7
Στοιχείο 8
Στοιχείο 9
Στοιχείο 10
#selector_example li:nth-child (ζυγό) ( μέγεθος γραμματοσειράς: 150 %; font-weight:bold ; χρώμα:πράσινο; )
Χρησιμοποιώντας το CSS:first-child Pseudo-Class για να επιλέξετε το πρώτο στοιχείο
Μια άλλη ψευδο-κλάση:first-child θα επιλέξει το πρώτο στοιχείο:
Στοιχείο 1
Στοιχείο 2
Στοιχείο 3
Στοιχείο 4
Στοιχείο 5
Στοιχείο 6
Στοιχείο 7
Στοιχείο 8
Στοιχείο 9
Στοιχείο 10
#selector_example li:first-child ( μέγεθος γραμματοσειράς: 150 %; font-weight:bold ; χρώμα:πράσινο; )
Χρησιμοποιώντας το CSS:last-child Pseudo-Class για να επιλέξετε το τελευταίο στοιχείο
Εκτός από την ψευδο-κλάση :first-child, υπάρχει μια ψευδο-κλάση :last-child που θα επιλέξει το τελευταίο στοιχείο από μια ομάδα στοιχείων:
Στοιχείο 1
Στοιχείο 2
Στοιχείο 3
Στοιχείο 4
Στοιχείο 5
Στοιχείο 6
Στοιχείο 7
Στοιχείο 8
Στοιχείο 9
Στοιχείο 10
#selector_example li:last-child ( μέγεθος γραμματοσειράς: 150 %; font-weight:bold ; χρώμα:πράσινο; )
Χρησιμοποιώντας το CSS pseudo-class:nth-last-child για να επιλέξετε το προτελευταίο στοιχείο
Μπορείτε επίσης να χρησιμοποιήσετε την ψευδο-κλάση :nth-last-child, η οποία συνδυάζει τα χαρακτηριστικά των ψευδο-κλάσεων :last-child και :nth-child για να ξεκινήσει η μέτρηση στοιχείων από το τέλος. Δηλαδή, μπορείτε να επιλέξετε ένα στοιχείο μετρώντας τους σειριακούς αριθμούς από το τέλος της ομάδας, για παράδειγμα, σε μια ομάδα δέκα στοιχείων, μπορείτε να επιλέξετε το δεύτερο στοιχείο από το τέλος:
Στοιχείο 1
Στοιχείο 2
Στοιχείο 3
Στοιχείο 4
Στοιχείο 5
Στοιχείο 6
Στοιχείο 7
Στοιχείο 8
Στοιχείο 9
Στοιχείο 10
#selector_example li:nth-last-child (2 ) ( μέγεθος γραμματοσειράς: 150 %; font-weight:bold ; χρώμα:πράσινο; )
Δείτε την ψευδο-τάξη :nth-child με το "
Η ψευδο-κλάση :nth-child χρησιμοποιείται για την προσθήκη στυλ σε στοιχεία με βάση την αρίθμηση στο δέντρο στοιχείων.
Σημειογραφία
| Περιγραφή | Παράδειγμα | |
|---|---|---|
| <тип> | Καθορίζει τον τύπο της τιμής. | <размер> |
| A&&B | Οι τιμές πρέπει να εξάγονται με την καθορισμένη σειρά. | <размер> && <цвет> |
| A | σι | Υποδεικνύει ότι πρέπει να επιλεγεί μόνο μία από τις προτεινόμενες τιμές (A ή B). | κανονικό | μικρά καπάκια |
| Α || σι | Κάθε τιμή μπορεί να χρησιμοποιηθεί μόνη της ή σε συνδυασμό με άλλες με οποιαδήποτε σειρά. | πλάτος || μετρώ |
| Ομαδικές αξίες. | [ καλλιέργεια || σταυρός] | |
| * | Επαναλάβετε μηδέν ή περισσότερες φορές. | [,<время>]* |
| + | Επαναλάβετε μία ή περισσότερες φορές. | <число>+ |
| ? | Ο καθορισμένος τύπος, λέξη ή ομάδα είναι προαιρετική. | ένθεση? |
| (Α, Β) | Επαναλάβετε τουλάχιστον Α, αλλά όχι περισσότερες από Β φορές. | <радиус>{1,4} |
| # | Επαναλάβετε μία ή περισσότερες φορές χωρισμένες με κόμμα. | <время># |
Αξίες
odd Όλοι οι περιττοί αριθμοί στοιχείων. ακόμη και Όλοι οι ζυγοί αριθμοί στοιχείων.<число>Σειριακός αριθμός παιδί στοιχείοσχετικά με τον γονέα του. Η αρίθμηση ξεκινά από το 1, το οποίο θα είναι το πρώτο στοιχείο στη λίστα.<выражение>Καθορίζεται ως an±b , όπου τα a και b είναι ακέραιοι και το n είναι ένας μετρητής που παίρνει αυτόματα την τιμή 0, 1, 2...
Αν το a είναι μηδέν, τότε δεν γράφεται και ο συμβολισμός μειώνεται σε b . Αν το b είναι μηδέν, τότε επίσης παραλείπεται και η παράσταση γράφεται με τη μορφή an . Τα α και β μπορεί να είναι αρνητικοί αριθμοί, οπότε το πρόσημο αλλάζει σε μείον, για παράδειγμα: 5n-1.
Χρησιμοποιώντας αρνητικές τιμές για τα a και b, ορισμένα αποτελέσματα μπορεί επίσης να είναι αρνητικά ή μηδενικά. Ωστόσο, τα στοιχεία επηρεάζονται μόνο από θετικές τιμές λόγω του γεγονότος ότι η αρίθμηση των στοιχείων ξεκινά από το 1.
Στον πίνακα. Το 1 παραθέτει ορισμένες πιθανές εκφράσεις και λέξεις-κλειδιά και υποδεικνύει ποιοι αριθμοί στοιχείων θα εμπλέκονται.
| Εννοια | Αριθμοί ειδών | Περιγραφή |
|---|---|---|
| 1 | 1 | Το πρώτο στοιχείο είναι συνώνυμο του :first-child pseudo-class. |
| 5 | 5 | Πέμπτο Στοιχείο. |
| 2n | 2, 4, 6, 8, 10,… | Όλα τα ζυγά στοιχεία, ισοδύναμα με άρτια . |
| 2n+1 | 1, 3, 5, 7, 9,… | Όλα τα περιττά στοιχεία, ισοδύναμα με τα περιττά . |
| 3n | 3, 6, 9, 12, 15,… | κάθε τρίτο στοιχείο. |
| 3n+2 | 2, 5, 8, 11, 14,… | Κάθε τρίτο στοιχείο, ξεκινώντας από το δεύτερο. |
| n+4 | 4, 5, 6, 7, 8,… | Όλα τα στοιχεία εκτός από τα τρία πρώτα. |
| -n+3 | 3, 2, 1 | τρία πρώτα στοιχεία. |
| 5n-2 | 3, 8, 13, 18, 23,… | — |
| ακόμη και | 2, 4, 6, 8, 10,… | Όλα τα άρτια στοιχεία. |
| Περιττός | 1, 3, 5, 7, 9,… | Όλα τα περίεργα στοιχεία. |
Είναι αποδεκτός ο συνδυασμός δύο ψευδο-τάξεων :nth-child για να επιλέξετε μια σειρά στοιχείων. Εδώ, θα επιλεγούν όλα τα στοιχεία από το δεύτερο έως το πέμπτο.
:nth-child(n+2):nth-child(-n+5) (… )
Παράδειγμα
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Λάδι | 16 | 34 | 62 | 74 | 57 |
| Χρυσός | 4 | 69 | 72 | 56 | 47 |
| Ξύλο | 7 | 73 | 79 | 34 | 86 |
| πέτρες | 23 | 34 | 88 | 53 | 103 |
ΣΤΟ αυτό το παράδειγμαΗ ψευδο-κλάση :nth-child χρησιμοποιείται για την αλλαγή του στυλ της πρώτης σειράς του πίνακα, καθώς και για τον χρωματισμό όλων των ζυγών σειρών (Εικόνα 1).
Ρύζι. 1. Εφαρμογή ψευδο-κλάσης:nth-child σε σειρές πίνακα
Προσδιορισμός
Κάθε προδιαγραφή περνά από διάφορα στάδια έγκρισης.
- Σύσταση (Σύσταση) - η προδιαγραφή έχει εγκριθεί από το W3C και συνιστάται ως πρότυπο.
- Σύσταση υποψηφίου ( Πιθανή σύσταση) - η ομάδα που είναι υπεύθυνη για το πρότυπο είναι ικανοποιημένη που εκπληρώνει τους στόχους της, αλλά απαιτείται η υποστήριξη της κοινότητας ανάπτυξης για την εφαρμογή του προτύπου.
- Προτεινόμενη σύσταση ( Προτεινόμενη σύσταση) - σε αυτό το στάδιο, το έγγραφο υποβάλλεται στη Συμβουλευτική Επιτροπή του W3C για τελική έγκριση.
- Σχέδιο εργασίας - Ένα πιο ώριμο προσχέδιο μετά από συζήτηση και τροποποιήσεις για κοινοτική αναθεώρηση.
- προσχέδιο του συντάκτη ( Εκδοτικό προσχέδιο) είναι μια πρόχειρη έκδοση του προτύπου μετά την πραγματοποίηση αλλαγών από τους συντάκτες του έργου.
- προσχέδιο ( Προσχέδιο προδιαγραφών) είναι η πρώτη πρόχειρη έκδοση του προτύπου.
Σας καλωσορίζω στο blog μου. Θα ήθελα να γράψω σήμερα σχετικά με το πώς να επιλέξετε το πρώτο γονικό στοιχείο στο css, επειδή αυτό σας επιτρέπει να χρησιμοποιείτε λιγότερες κατηγορίες στυλ.
Ψευτοτάξεις: πρώτο παιδί και πρώτο παιδί ποια είναι η διαφορά;
Για να αναφερθούμε στο πρώτο στοιχείο από το μητρικό κοντέινερ στο css, επινοήθηκαν δύο ψευδο-κλάσεις. Προτείνω αμέσως να εξετάσετε τα πάντα με ένα παράδειγμα, ώστε να καταλάβετε:
Αυτή είναι μια παράγραφος
Αυτή είναι μια παράγραφος
Αυτή είναι μια παράγραφος
Αυτή είναι μια παράγραφος
Αυτή είναι μια παράγραφος
Ας πούμε ότι έχουμε μια τέτοια σήμανση. Ο στόχος είναι να ανατρέξετε στην πρώτη παράγραφο και να την διαμορφώσετε ξεχωριστά από τις άλλες χωρίς να προσθέσετε τάξεις σε αυτήν. Αυτό μπορεί να γίνει ως εξής:
#wrapper p:first-child(
Χρώμα: κόκκινο;
}
Το χρώμα της πρώτης παραγράφου θα γίνει κόκκινο, μπορείτε να ελέγξετε.
#wrapper p:first-of-type(
χρώμα: κόκκινο;
}
Το ίδιο θα συμβεί. Ποια είναι λοιπόν η διαφορά; Και έγκειται στο γεγονός ότι η ψευδο-τάξη πρώτη του τύπου ψάχνει και βρίσκει το πρώτο στοιχείο του γονέα, δεδομένου του τύπου του, και το πρώτο παιδί δεν ψάχνει τίποτα - απλώς παίρνει το πρώτο στοιχείο του γονέα που συναντά και, αν είναι παράγραφος, τότε εφαρμόζει στυλ σε αυτήν. Εάν όχι, δεν θα επιλεγεί και θα εφαρμοστεί τίποτα.
Αυτή είναι μια παράγραφος
Αυτή είναι μια παράγραφος
Αυτή είναι μια παράγραφος
Αυτή είναι μια παράγραφος
Αυτή είναι μια παράγραφος
Τώρα σκεφτείτε: θα λειτουργούσε το πρώτο του τύπου σε αυτήν την περίπτωση; Ναι, γιατί λαμβάνει υπόψη τον τύπο του στοιχείου και θα επιλέξει την πρώτη παράγραφο και όχι την πρώτη από όλα τα στοιχεία. Θα δουλέψει το πρώτο παιδί; Δοκίμασέ το. Δεν θα λειτουργήσει επειδή η παράγραφος δεν είναι το πρώτο στοιχείο στο γονικό στοιχείο.
Προσωπικά, δεν κατάλαβα αμέσως τη διαφορά μεταξύ αυτών των ψευδοτάξεων και μπερδεύτηκα για λίγο, αλλά τώρα, ελπίζω να σας το εξήγησα κανονικά.
Μια άλλη σημαντική λεπτομέρεια
Τα στοιχεία μετρώνται από το γονικό στοιχείο, οπότε αν καθορίσατε ως εξής:
Li:πρώτου τύπου(
…
}
Στη συνέχεια, θα επιλεγούν τα πρώτα στοιχεία λίστας στην ετικέτα σώματος (δηλαδή σε ολόκληρη τη σελίδα). Έτσι, σε οποιαδήποτε λίστα, το πρώτο στοιχείο θα έχει διαφορετική μορφή.
Αν γράφεις έτσι:
#sidebar li:first-of-type(
…
}
Τότε θα επιλεγούν μόνο τα πρώτα στοιχεία των λιστών στην πλαϊνή γραμμή, δηλαδή η πλαϊνή στήλη στον ιστότοπό μας.
Χρησιμοποιώντας τους διάφορους επιλογείς για τους οποίους έγραψα, μπορείτε να προσεγγίσετε σχεδόν οποιοδήποτε στοιχείο σε μια ιστοσελίδα. Σε αυτό το άρθρο, μπορείτε να διαβάσετε περισσότερα σχετικά με τον τρόπο εργασίας με την ψευδο-κλάση nth-child στο css και σας δίνει επιλογές όσον αφορά την επιλογή στοιχείων.
Παρεμπιπτόντως, ξέχασα να αναφέρω τις αντίθετες ψευδοτάξεις - τελευταίο παιδί (και τελευταίου τύπου, αντίστοιχα). Σας επιτρέπουν να επιλέξετε το τελευταίο στοιχείο από το γονικό κοντέινερ.
Πού μπορείτε να κάνετε πράξη
Γράφω για αυτές τις ψευδο-τάξεις επειδή χρησιμοποιούνται ενεργά κατά την τοποθέτηση με css. Εδώ έχετε στη σελίδα, για παράδειγμα, ένα μπλοκ παρόμοιων αναρτήσεων ή σχολίων ή κάτι άλλο. Και είχατε μια ιδέα να διακοσμήσετε κάπως το πρώτο του στοιχείο με έναν ιδιαίτερο τρόπο. Ή ίσως το τελευταίο. Και ναι, ο καθένας μπορεί.
Απλά πρέπει να μάθετε το όνομα του μπλοκ στο οποίο είναι αποθηκευμένο το επιθυμητό στοιχείο. Ας πούμε ότι έχουμε να κάνουμε με λαϊκούς δίσκους. Το μητρικό κοντέινερ έχει μια δημοφιλή κατηγορία. Τότε γράφουμε ως εξής:
Δημοφιλές li:first-of-type(
Πάνω επένδυσης: 20 px
}
Όλα, το πρώτο στοιχείο της λίστας σε αυτό έλαβε μια εσοχή από πάνω και μπορείτε να προσθέσετε ό,τι θέλετε στα στυλ.
Εδώ είναι ένα άλλο παράδειγμα. Έχω μόνο τρία πανομοιότυπα γκρι μπλοκ στην ετικέτα σώματος. Ας γράψουμε έτσι.
Περιγραφή
Η ψευδο-κλάση :nth-child χρησιμοποιείται για την προσθήκη στυλ σε στοιχεία με βάση την αρίθμηση στο δέντρο στοιχείων.
Σύνταξη
στοιχείο:nth-child(μονό | ζυγό |<число> | <выражение>) {...}
Αξίες
odd Όλοι οι περιττοί αριθμοί στοιχείων. ακόμη και Όλοι οι ζυγοί αριθμοί στοιχείων. αριθμός Ο τακτικός αριθμός του παιδιού σε σχέση με τον γονέα του. Η αρίθμηση ξεκινά από το 1, το οποίο θα είναι το πρώτο στοιχείο στη λίστα. έκφραση Καθορίζεται ως an+b , όπου τα a και b είναι ακέραιοι και το n είναι ένας μετρητής που παίρνει αυτόματα την τιμή 0, 1, 2...Αν το a είναι μηδέν, τότε δεν γράφεται και ο συμβολισμός μειώνεται σε b . Αν το b είναι μηδέν, τότε επίσης παραλείπεται και η παράσταση γράφεται με τη μορφή an . Τα α και β μπορεί να είναι αρνητικοί αριθμοί, οπότε το πρόσημο αλλάζει σε μείον, για παράδειγμα: 5n-1.
Χρησιμοποιώντας αρνητικές τιμές για τα a και b, ορισμένα αποτελέσματα μπορεί επίσης να είναι αρνητικά ή μηδενικά. Ωστόσο, τα στοιχεία επηρεάζονται μόνο από θετικές τιμές λόγω του γεγονότος ότι η αρίθμηση των στοιχείων ξεκινά από το 1.
Στον πίνακα. Το 1 παραθέτει ορισμένες πιθανές εκφράσεις και λέξεις-κλειδιά και υποδεικνύει ποιοι αριθμοί στοιχείων θα εμπλέκονται.
HTML5 CSS3 IE Cr Op Sa Fx
| 2134 | 2135 | 2136 | 2137 | 2138 | |
| Λάδι | 16 | 34 | 62 | 74 | 57 |
| Χρυσός | 4 | 69 | 72 | 56 | 47 |
| Ξύλο | 7 | 73 | 79 | 34 | 86 |
| πέτρες | 23 | 34 | 88 | 53 | 103 |
Σε αυτό το παράδειγμα, η ψευδο-κλάση :nth-child χρησιμοποιείται για την αλλαγή του στυλ της πρώτης σειράς του πίνακα, καθώς και για τον χρωματισμό όλων των ζυγών σειρών (Εικόνα 1).