lorem ipsum?

Aenean commodo ligula eget dolor. Vestibulum dapibus nunc ac augue;

Nunc sed turpis. Donec posuere vulputate arcu;

Υπάρχει μια ενότητα με μια επικεφαλίδα, έναν υπότιτλο και πολλές παραγράφους. Θέλω η πρώτη παράγραφος να ξεχωρίζει λίγο με μεγαλύτερο μέγεθος γραμματοσειράς 1,5em .

Ίσως θελήσετε να δοκιμάσετε να χρησιμοποιήσετε τον κώδικα ενότητας p:first-child, καθώς πρέπει να προσθέσετε κάποιο επιπλέον στυλ στην πρώτη παράγραφο αυτής της ενότητας. Αλλά αυτό δεν θα λειτουργήσει επειδή το πρώτο παιδί της ενότητας είναι το h1 . Σε αυτήν την περίπτωση, πρέπει να χρησιμοποιηθεί ο επιλογέας :first-of-type.

Υπάρχει ολόκληρη γραμμήΟι επιλογείς αυτού του τύπου είναι :first-of-type , :last-of-type , :nth-of-type και :nth-last-of-type . Συμπεριφέρονται ακριβώς όπως :nth-child , αλλά επιλέγουν τις ντες παρουσίες στοιχείων ενός συγκεκριμένου τύπου.

Περιγραφή

Η ψευδο-κλάση :nth-child χρησιμοποιείται για την προσθήκη στυλ σε στοιχεία με βάση την αρίθμηση στο δέντρο στοιχείων.

Σύνταξη

στοιχείο:nth-child(μονό | ζυγό |<число> | <выражение>) {...}

Αξίες

Αν το a είναι μηδέν, τότε δεν γράφεται και ο συμβολισμός μειώνεται σε b . Αν το b είναι μηδέν, τότε επίσης παραλείπεται και η παράσταση γράφεται με τη μορφή an . Τα α και β μπορεί να είναι αρνητικοί αριθμοί, οπότε το πρόσημο αλλάζει σε μείον, για παράδειγμα: 5n-1.

Χρησιμοποιώντας αρνητικές τιμές για τα a και b, ορισμένα αποτελέσματα μπορεί επίσης να είναι αρνητικά ή μηδενικά. Ωστόσο, τα στοιχεία επηρεάζονται μόνο από θετικές τιμές λόγω του γεγονότος ότι η αρίθμηση των στοιχείων ξεκινά από το 1.

Στον πίνακα. 1 δείχνει μερικές πιθανές εκφράσεις και λέξεις-κλειδιά, και υποδεικνύει επίσης ποιοι αριθμοί αντικειμένων θα αφορούν.

HTML5 CSS3 IE Cr Op Sa Fx

ΣΤΟ αυτό το παράδειγμαΗ ψευδο-κλάση :nth-child χρησιμοποιείται για την αλλαγή του στυλ της πρώτης σειράς του πίνακα, καθώς και για τον χρωματισμό όλων των ζυγών σειρών (Εικόνα 1).

Σας καλωσορίζω στο 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 σάς επιτρέπει να επιλέξετε μια ομάδα στοιχείων με κοινές ιδιότητες. Χρησιμοποιείται πιο συχνά για την επιλογή ζυγών ή περιττών στοιχείων από μια ομάδα. Συχνά χρησιμοποιείται για να κάνει το τραπέζι να μοιάζει με ζέβρα δίνοντας διαφορετικά χρώματα φόντου σε μονές και ζυγές σειρές.

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 με το "