Δημιουργία συγκεκριμένων μορφών και διατάξεων CSS

Sep 12, 2025

πως να

Σε αυτό το σεμινάριο θα ρίξουμε μια ματιά στους τρόπους αλλαγής των στυλ του CSS των στοιχείων, καθώς και φαινομενικά στυλ των γονέων τους, ανάλογα με τον αριθμό των στοιχείων. Θα δούμε επίσης πώς να αλλάξουμε τη διάταξη στοιχείων με βάση την ποσότητα τους, προκειμένου να δημιουργηθεί μια πιο προσαρμοστική Διάταξη ιστότοπου που κάνει καλύτερη χρήση του χώρου.

CSS κόλπα για να φέρει επανάσταση στις διατάξεις του ιστού σας

Τέλος, θα καλύψουμε τη χρήση των μετρητών CSS για να εμφανιστεί το δείκτη ενός στοιχείου μέσα σε ένα σετ μέσα σε αυτό, καθώς και την εμφάνιση του συνολικού μέτρου μέσα στον γονέα. Όλα αυτά θα επιτευχθούν με καθαρά CSS μόνο, χωρίς την ανάγκη για JavaScript ή πλαίσια, οδηγώντας σε απλό και πιο αποδοτικό κώδικα.

Για να δημιουργήσετε έναν ιστότοπο χωρίς την ανάγκη για ατελείωτη κώδικα, θα χρειαστείτε ένα οικοδόμος ιστότοπου . Και ό, τι οι δυνατότητες του ιστότοπού σας, βεβαιωθείτε ότι έχετε web hosting Η υπηρεσία είναι κατάλληλη για το σκοπό. Για κάτι διαφορετικό, πάρτε το δικό σας αποθήκευση σύννεφων μέχρι το μηδέν.

Επιλεκτικοί ενιαίου στοιχείου

Το CSS3 έχει μόνο ένα μόνο ζευγάρι επιλογών που μπορούν να καθορίσουν την ποσότητα στοιχείων, δηλαδή: μόνο-παιδί και: μόνο τύπου τύπου. Τούτου λεχθέντος, είναι πραγματικά μόνο σε θέση να καθορίσουν αν ένα στοιχείο είναι μόνοι της ή έχει αδέλφια. Ο επιλογέας μόνο-παιδιού ταιριάζει με στοιχεία που είναι το μόνο παιδί του γονέα τους, ενώ: μόνο τύπου αντιστοίχισης στοιχείων που είναι οι μόνες του τύπου τους.

Δυστυχώς, αυτό είναι όσον αφορά τους ενιαίους επιλογείς, αλλά υπάρχουν μερικοί άλλοι επιλογείς που μπορούν να στοχεύουν στοιχεία με βάση την παραγγελία τους σε ένα σύνολο παρόμοιων στοιχείων. Αυτά είναι: Nth-child,: Nth-of-type, Nth-last-type και nth-τελευταίο τύπου, οι οποίοι συνήθως χρησιμοποιούνται για να στοχεύουν στοιχεία με βάση την παραγγελία τους σε ένα σύνολο παρόμοιων στοιχείων. Οι εξής: Οι επιλογές του Nth-last-last-type-of-type χρησιμοποιούνται για τον προσδιορισμό της σειράς στοιχείων που υπολογίζονται προς τα πίσω από το τελευταίο στοιχείο στο πρώτο. Το συνδυασμό αυτών με άλλους επιλογείς μας επιτρέπει να χτίσουμε πιο πολύπλοκες αλυσίδες που στοχεύουν συγκεκριμένα στοιχεία με βάση την ποσότητα τους.

Αλυσίδες επιλογής συγκεκριμένων ποσοτήτων

selector chains — Επιλογή: πρώτος τύπος: Nth-τελευταίος τύπος (3) και ο γενικός συνδυασμός αδελφών ~ μπορεί να συνδυαστεί για να στοχεύσει το πρώτο από τα τρία και όλα τα αδέλφια του, επομένως όλα σε ένα σύνολο τριών

Από τους τέσσερις προαναφερθέντες επιλογείς, ο κύριος που θα χρησιμοποιήσουμε σε αυτό το σεμινάριο είναι ο Nth-last-of-type. Η διαφορά μεταξύ αυτού και του επιλογέα Nth-Last-Child είναι ότι το τελευταίο περιλαμβάνει όλα τα αδέλφια των στοιχείων στο σετ, ενώ ο πρώτος περιλαμβάνει μόνο στοιχεία του ίδιου τύπου HTML και είναι επομένως πιο επιλεκτικό. Για το υπόλοιπο αυτού του σεμινάριο, θα χρησιμοποιήσουμε τους επιλογείς τύπου-τύπου, ωστόσο οι παραλλαγές των ακτών είναι εξίσου έγκυρες.

Το Nth-τελευταίο τύπου μπορεί να χρησιμοποιηθεί μαζί με τους πιο δημοφιλείς επιλογείς πρώτου τύπου για να δημιουργήσετε μια αλυσίδα που στοχεύει το πρώτο στοιχείο σε ένα σύνολο μιας επιθυμητής ποσότητας. Για παράδειγμα, μπορούμε να χρησιμοποιήσουμε: πρώτος τύπος: nth-τελευταίο τύπου (3) σε στοιχεία στόχου που είναι και τα δύο πρώτα και το τρίτο από το τέλος του τύπου τους ή, με άλλα λόγια, το πρώτο του α Σετ τριών. Στη συνέχεια, μπορούμε να επεκτείνουμε αυτό με τον γενικό συνδυαστή αδελφών ~ για να επιλέξετε όλα τα αδέλφια που ακολουθούν το πρώτο από ένα σύνολο τριών. Συνδυάζοντας αυτές τις δύο αλυσίδες επιλογής, μπορούμε να δημιουργήσουμε έναν πολύπλοκο επιλογέα που στοχεύει στα στοιχεία που είναι τα πρώτα από τα τρία και όλα τα στοιχεία του ίδιου τύπου που το ακολουθούν, επιλέγοντας έτσι όλα τα στοιχεία σε ένα σύνολο τριών.

. First-of-type: nth-τελευταίο τύπου (3),
.Box: Πρώτο τύπου: Nth-last-of-type (3) ~ .box

Αυτή η αλυσίδα επιλογέα όχι μόνο λειτουργεί για έναν συγκεκριμένο αριθμό στοιχείων, αλλά μπορεί ακόμη και να τροποποιηθεί για να στοχεύσει ένα εύρος ποσοτήτων.

selector chain — Οι επιλογείς Nth-last-of-type (n + 2) και: nth-τελευταίος τύπου (-n + 2) μπορούν να χρησιμοποιηθούν για να στοχεύουν στοιχεία σε σύνολα μεγαλύτερη και μικρότερη από δύο αντίστοιχα

Αν θέλουμε να στοχεύουμε στοιχεία σε ένα σύνολο με ποσότητα μεγαλύτερη ή μικρότερη από μια συγκεκριμένη τιμή m, μπορούμε να χρησιμοποιήσουμε την αλυσίδα με τις τεχνικές (n + m) και (-n + m) αντίστοιχα. Για παράδειγμα, για να στοχεύσετε όλα τα στοιχεία σε ένα σύνολο δύο ή περισσοτέρων στοιχείων που μπορούμε να χρησιμοποιήσουμε:

. First-of-type: nth-τελευταίο τύπου (n + 2),
.Box: Πρώτο τύπου: Nth-τελευταίο τύπου (n + 2) ~ .box

Ομοίως, μπορούμε να στοχεύσουμε όλα τα στοιχεία σε ένα σύνολο δύο ή λιγότερων στοιχείων χρησιμοποιώντας:

.Box: Πρώτο τύπου: Nth-τελευταίο τύπου (-n + 2),
.Box: Πρώτο τύπου: Nth-last-of-type (-n + 2) ~ .box

Όπως μπορείτε να δείτε, αυτή είναι μια ισχυρή αλυσίδα επιλογέα που μας επιτρέπει να επιτύχουμε πολύ ενδιαφέροντα και χρήσιμα πράγματα χωρίς την ανάγκη για javascript ή άλλα πλαίσια. Είναι ιδιαίτερα χρήσιμο όταν πρόκειται για τη δημιουργία προσαρμοστικών διατάξεων που αλλάζουν με βάση τον αριθμό των στοιχείων.

Δυναμικές, προειδοποιητικές διατάξεις

grid layouts with odd and even numbers — Για μια ομοιόμορφη σειρά στοιχείων διατάξεις πλέγματος φαίνονται υπέροχα, αλλά όχι τόσο για τους περίεργους αριθμούς

Ας πούμε ότι θέλουμε να εμφανίσουμε μια ομάδα κιβωτίων που δείχνουν τα αποτελέσματα μιας αναζήτησης ή μια κλήση API σε μια διάταξη δύο στήλης, δίκτυο. Το πρόβλημα έγκειται στο γεγονός ότι τα αποτελέσματα προέρχονται από μια εξωτερική πηγή και δεν έχουμε κανένα τρόπο να γνωρίζουμε τον αριθμό των αποτελεσμάτων που θα επιστραφούν, επομένως δεν γνωρίζουμε πόσα κιβώτια θα δημιουργηθούν. Ενώ το πλέγμα φαίνεται εξαιρετικό για ένα ζυγό αριθμό κιβωτίων, όταν εφαρμόζεται σε ένα περίεργο αριθμό το τελευταίο κουτί κάθεται σε μια σειρά και μοιάζει ... καλά, είδος μονής.

Αυτό είναι ιδιαίτερα προβληματικό όταν χρησιμοποιείτε αντικείμενα flexbox με ευελιξία που εφαρμόζονται σε αυτά, καθώς προκαλεί το τελευταίο στοιχείο να αναπτυχθεί στον κενό χώρο στη σειρά, λαμβάνοντας έτσι το πλήρες πλάτος. Ένας τρόπος πρόληψης αυτού θα μπορούσε να γίνει η πρώτη από έναν παράξενο αριθμό κουτιών καταλάβει μια πλήρη σειρά εφαρμόζοντας ένα πλάτος 100% στα πρώτα κουτιά που είναι επίσης ένας περίεργος αριθμός κιβωτίων από το τέλος, χρησιμοποιώντας: πρώτο παιδί: nth-τελευταίο τύπου (περίεργο). Αυτό παρέχει μια καλύτερη διάταξη καθώς δίνει το πρώτο και ως εκ τούτου το πιο σημαντικό ή το πρόσφατο αποτέλεσμα πιο σημαντικό από το τελευταίο.

Μπορούμε ακόμη να προσθέσουμε μια ειδική περίπτωση για το πότε η ποσότητα διαιρείται από τρεις χρησιμοποιώντας: πρώτο παιδί: nth-τελευταίο τύπου (3n) για να μετασχηματίσει το δίκτυο σε μια διάταξη τριών στηλών εφαρμόζοντας ένα πλάτος 33% στην πρώτη Κουτιά σε ένα σετ με μια ποσότητα διαιρέτη κατά τρία και όλα τα κουτιά που το ακολουθούν.

 .box {
  Πλάτος: 50%.
}

.Box: πρώτο παιδί: nth-last-of-type (παράξενο) {
  Πλάτος: 100%.
}

.Box: πρώτο παιδί: Nth-τελευταίο τύπου (3n),
.Box: πρώτο παιδί: nth-last-of-type (3n) ~ .box {
  Πλάτος: 33%.
}

συμπέρασμα

different layouts — Οι διατάξεις μπορούν να αλλάξουν με βάση τον αριθμό των στοιχείων μόνο με τη χρήση αλυσίδων επιλογών CSS

Όπως έχουμε δει, οι επιλογείς CSS μπορούν να συγκεντρωθούν με διάφορους ενδιαφέροντες τρόπους για να εφαρμόσουν στυλ και προσαρμοστικές διατάξεις που αλλάζουν με βάση την ποσότητα των στοιχείων. Οι αλυσίδες επιλογής μπορούν επίσης να χρησιμοποιηθούν για να εφαρμόσουν φαινομενικά τα στυλ στον γονέα ενός συνόλου στοιχείων μιας ορισμένης ποσότητας, χρησιμοποιώντας :: Πριν ή :: Μετά τα ψευδο-στοιχεία που είναι τοποθετημένα για να αναλάβουν το πλήρες μέγεθος του γονέα. Σε συνδυασμό με τους μετρητές CSS, αυτά τα ψευδο-στοιχεία μπορούν να χρησιμοποιηθούν για την εμφάνιση του συνολικού αριθμού από απογόνους σε ένα γονικό στοιχείο, καθώς και το κείμενο που αλλάζει ανάλογα με την ποσότητα των απογόνων.

Αυτές οι τεχνικές προσφέρουν έναν πολύτιμο τρόπο δημιουργίας δυναμικών μορφών και διατάξεων που βασίζονται σε ποσότητες που είναι χρήσιμες όταν χειρίζονται έναν άγνωστο αριθμό στοιχείων, τα οποία συχνά συμβαίνει όταν ασχολούνται με το API.

Το άρθρο αυτό δημοσιεύθηκε αρχικά στην έκδοση 308 του καθαρά , το περιοδικό Best-Selling στον κόσμο για τους σχεδιαστές και τους προγραμματιστές ιστοσελίδων. Αγοράστε τεύχος 308 εδώ ή Εγγραφείτε εδώ .

Σχετικά Άρθρα:

5 συμβουλές για εξαιρετικά γρήγορη CSS
Δημιουργήστε μια ανταποκρινόμενη διάταξη με το CSS Grid
Κατανόηση της ιδιοκτησίας οθόνης CSS

Δημιουργία συγκεκριμένων μορφών και διατάξεων CSS

Επιλεκτικοί ενιαίου στοιχείου

Αλυσίδες επιλογής συγκεκριμένων ποσοτήτων

Δυναμικές, προειδοποιητικές διατάξεις

συμπέρασμα

πως να - Τα πιο δημοφιλή άρθρα

Πώς να σταματήσετε τα γυαλιά σας να σκουπίζετε όταν φοράτε μάσκα προσώπου

Πώς να κάνετε ένα meme στο Photoshop

Εισαγωγή στις προσαρμοσμένες ιδιότητες CSS

Γλυπτική ρεαλιστική ανατομία σε ZBrush

Πώς να τονίσει το σημείο εστίασης μιας εικόνας

Πώς να αναμίξετε το χρώμα σκιάς σε βαφή

Βάλτε ένα γούνινο πορτρέτο κατοικίδιων ζώων

Πώς να πάρετε περισσότερα από ψηφιακές υφές

Κατηγορίες