Ο οριστικός οδηγός για τις ψευδο-κλάσεις CSS
Είτε είστε αρχάριος είτε ένας έμπειρος προγραμματιστής CSS, πιθανώς έχετε ακούσει ψευδο-τάξεις. Η πιο γνωστή ψευδο-τάξη είναι πιθανότατα :φτερουγίζω, που μας δίνει τη δυνατότητα να στυλίσουμε ένα στοιχείο όταν είναι στην κατάσταση του hover, δηλαδή όταν μια συσκευή δείκτη, όπως ένα ποντίκι, δείχνει προς αυτήν.
Ακολουθώντας την έννοια των προηγούμενων δημοσιεύσεών μας σχετικά με τα περιθώρια: αυτόματα και CSS Floats, εξετάζουμε πιο προσεκτικά τις ψευδο-τάξεις σε αυτή τη θέση. Θα δούμε τι ψευδο-τάξεις είναι πραγματικά, πώς λειτουργούν, πώς μπορούμε να τα κατηγοριοποιήσουμε και πώς είναι διαφορετικά από τα ψευδο-στοιχεία.
Τι είναι οι ψευδο-τάξεις?
Μια ψευδο-τάξη είναι μια λέξη-κλειδί που μπορούμε να προσθέσουμε στους επιλογείς CSS για να καθορίστε μια ειδική κατάσταση του στοιχείου HTML που ανήκει. Μπορούμε να προσθέσουμε μια ψευδο-τάξη σε έναν επιλογέα CSS χρησιμοποιώντας το σύνταξη του παχέος εντέρου : σαν αυτό: α: αιωρείται ...
Μια κλάση CSS είναι ένα χαρακτηριστικό που μπορούμε να προσθέσουμε σε στοιχεία HTML που θέλουμε να εφαρμόσουμε στους ίδιους κανόνες στυλ, όπως τα κορυφαία στοιχεία του μενού ή τους τίτλους των γραφικών στοιχείων της πλαϊνής γραμμής. Με άλλα λόγια, μπορούμε να χρησιμοποιήσουμε τις κλάσεις CSS ομάδα ή να ταξινομήσετε στοιχεία HTML που είναι όμοια με τον ένα ή τον άλλο τρόπο.
Οι ψευτο-τάξεις είναι παρόμοιες με αυτές με την έννοια ότι είναι επίσης χρησιμοποιείται για να προσθέσετε κανόνες στυλ στα στοιχεία που έχουν το ίδιο χαρακτηριστικό.
Αλλά ενώ γνήσια μαθήματα είναι ορισμένο από τον χρήστη και μπορεί να εντοπιστεί στον πηγαίο κώδικα, για παράδειγμα ο εργασία των κανονικών τάξεων CSS είναι να ταξινομούν ή ομαδοποιούν στοιχεία. Οι προγραμματιστές ξέρουν πώς πρέπει να ομαδοποιηθούν τα στοιχεία τους: μπορούν να σχηματίσουν κατηγορίες όπως "στοιχεία μενού", "κουμπιά", "μικρογραφίες" κ.λπ. για να ομαδοποιήσουν και αργότερα να σχεδιάσουν παρόμοια στοιχεία. Αυτές οι ταξινομήσεις βασίζονται στα χαρακτηριστικά των στοιχείων που είναι που δόθηκαν από τους ίδιους τους προγραμματιστές. Για παράδειγμα, εάν ένας προγραμματιστής αποφασίσει να χρησιμοποιήσει ένα Ωστόσο, τα στοιχεία HTML έχουν τα δικά τους κοινά χαρακτηριστικά με βάση την κατάσταση, τη θέση, τη φύση και την αλληλεπίδραση με τη σελίδα και τον χρήστη. Αυτά είναι τα χαρακτηριστικά που είναι δεν συνήθως σημειώνονται στον κώδικα HTML, αλλά μπορούμε στοχεύστε τους με ψευδο-τάξεις στο CSS, για παράδειγμα: Αυτά είναι τα χαρακτηριστικά των χαρακτηριστικών που γενικά στοχεύουν οι ψευδο-τάξεις. Για να κατανοήσουμε καλύτερα τη διαφορά μεταξύ των τάξεων και των ψευδών κλάσεων, ας υποθέσουμε ότι χρησιμοποιούμε την τάξη Μπορούμε να στυλίσουμε αυτά τα στοιχεία του τελευταίου παιδιού με το ακόλουθο CSS: Αλλά τι συμβαίνει όταν αλλάζει το τελευταίο στοιχείο; Λοιπόν, θα πρέπει να το μετακινήσουμε Αυτή η ταλαιπωρία η ενημέρωση των κλάσεων μπορεί να αφεθεί στον πράκτορα χρήστη, τουλάχιστον για εκείνα τα χαρακτηριστικά που είναι κοινά μεταξύ των στοιχείων (και είναι ένα τελευταίο στοιχείο είναι τόσο κοινό όσο μπορεί να πάρει). Έχοντας ένα προκαθορισμένο Υπάρχουν πολλά είδη ψευδο-τάξεων, όλα αυτά μας παρέχουν τρόπους για να στοχεύσουμε στοιχεία που βασίζονται στα χαρακτηριστικά τους που είναι διαφορετικά απρόσιτα ή πιο δύσκολα για πρόσβαση. Ακολουθεί μια λίστα των τυποποιημένων ψευδο-κατηγοριών στο MDN. Δυναμικές ψευδο-κλάσεις προστίθενται και αφαιρούνται από τα στοιχεία HTML δυναμικά, με βάση την κατάσταση στην οποία μεταβαίνουν σε ανταπόκριση στις αλληλεπιδράσεις του χρήστη. Μερικά παραδείγματα δυναμικών ψευδο-τάξεων είναι Οι ψευδο-κλάσεις με βάση το κράτος προστίθενται στα στοιχεία όταν είναι σε μια συγκεκριμένη στατική κατάσταση. Μερικά από τα πιο γνωστά παραδείγματα είναι: Η πιο δημοφιλής ψευδο-τάξη με βάση το κράτος πρέπει να είναι Οι διαρθρωτικές ψευδο-κλάσεις ταξινομούν τα στοιχεία με βάση για τη θέση τους στη δομή του εγγράφου. Τα πιο συνηθισμένα παραδείγματα είναι Υπάρχουν επίσης διάφορες ψευδο-κατηγορίες που είναι δύσκολο να ταξινομηθούν, όπως: Ένα από τα πιο δύσκολα πράγματα για τις ψευδο-τάξεις είναι πιθανότατα να κατανοήσουμε τη διαφορά μεταξύ των Και οι δύο είναι διαρθρωτικές ψευδο-τάξεις και σημειώνουν ένα συγκεκριμένο στοιχείο μέσα σε ένα γονικό στοιχείο (δοχείο), αλλά με διαφορετικό τρόπο. Υποθέτω n είναι 2, τότε Ας ρίξουμε μια ματιά σε ένα παράδειγμα. Ας δούμε πώς αυτό το σύντομο στυλ CSS το HTML σε δύο διαφορετικές περιπτώσεις. Στην περίπτωση 1, το δεύτερο στοιχείο μέσα στο a Αλλά αν το γονικό στοιχείο κάνει έχει μια δεύτερη παράγραφο, το Στο παράδειγμα μας, το Παράγραφος 1, Παιδί 1 Παράγραφος 2, παιδί 3 Στη δεύτερη περίπτωση, μεταφέρουμε την μη ταξινομημένη λίστα στην τρίτη θέση και η δεύτερη παράγραφος θα έρθει μπροστά της. Αυτό σημαίνει ότι και τα δύο Παράγραφος 1, Παιδί 1 Παράγραφος 2, Παιδί 2 Αν θέλετε να διαβάσετε περισσότερα σχετικά με τις διαφορές μεταξύ του Όταν μιλάμε για ψευδο-τάξεις, είναι επίσης σημαντικό να καταλάβουμε πώς διαφέρουν από τα ψευδο-στοιχεία, προκειμένου να μην αναμειγνύονται. Αλλά ενώ χρησιμοποιούμε ψευδο-τάξεις για να επιλέξετε τα στοιχεία HTML που υπάρχουν στο δέντρο εγγράφων απλά δεν σημειώνονται χωριστά, τα ψευδο-στοιχεία μας επιτρέπουν να στοχεύουμε στοιχεία που δεν υπάρχουν συνήθως στο DOM, είτε καθόλου (π.χ. Υπάρχει επίσης a διαφορά στη σύνταξη. Τα ψευδο-στοιχεία γενικά αναγνωρίζονται με διπλάσιους Αυτό μπορεί να οδηγήσει σε μια περίπτωση σύγχυσης, όπως στο CSS2, τα ψευδοεπεξεργαστά σημειώθηκαν με ένα μόνο παχύ έντερο - τα προγράμματα περιήγησης εξακολουθούν να δέχονται τη σύνταξη σύνθετου παχέος εντέρου για ψευδο-στοιχεία. Υπάρχουν επίσης διαφορές μεταξύ των ψευδο-κατηγοριών και των ψευδο-στοιχείων στο τον τρόπο με τον οποίο μπορούμε να τους στοχεύσουμε με το CSS. Τα ψευδο-στοιχεία μπορούν να εμφανιστούν μόνο μετά την ακολουθία των επιλογέων, ενώ οι ψευδοκλάσεις μπορούν να τοποθετηθούν οπουδήποτε στην ακολουθία επιλογής CSS. Για παράδειγμα, μπορείτε να στοχεύσετε το τελευταίο στοιχείο λίστας ενός στοιχείου λίστας όπως Ή Η πρώτη ακολουθία του επιλογέα επιλέγει το τελευταίο παιδί μέσα στο Ας προσπαθήσουμε να κάνουμε κάτι παρόμοιο με ψευδο-στοιχεία. Ο παραπάνω κώδικας CSS είναι έγκυρος και θα εμφανιστεί το κείμενο "κόκκινο" μετά ο Αυτός ο κώδικας, από την άλλη πλευρά, δεν θα λειτουργήσει, όπως εμείς δεν μπορεί να αλλάξει τη θέση ενός ψευδο-στοιχείου μέσα στην ακολουθία επιλογής. Επίσης, μόνο ένα ψευδο-στοιχείο μπορεί να εμφανιστεί δίπλα σε έναν επιλογέα, ενώ ψευδο-τάξεις μπορούν να συνδυαστούν μεταξύ τους εάν ο συνδυασμός έχει νόημα. Για παράδειγμα, για να στοχεύσετε τα στοιχεία του πρώτου παιδιού που είναι επίσης μόνο για ανάγνωση, μπορούμε να δημιουργήσουμε ένα συνδυασμό των ψευδοκλάδων Ένας κωδικός επιλογής με α Είναι σημαντικό να το ξέρετε αυτό αυτά είναι δεν Pseudo-κλάσεις CSS που στοχεύουν το jQuery. Ονομάζονται επεκτάσεις επιλογής jQuery. Οι επεκτάσεις επιλογής jQuery σας επιτρέπουν στοχεύσετε στοιχεία HTML με απλούστερες λέξεις-κλειδιά. Οι περισσότεροι από αυτούς είναι συνδυασμοί πολλαπλών κανονικών επιλογών CSS, οι οποίοι αντιπροσωπεύονται με μία μόνο λέξη-κλειδί.Σκοπός των Ψευδο-Τάξεων
.τελευταίος για τον εντοπισμό των τελευταίων στοιχείων σε διαφορετικά γονικά κοντέινερ.
li.last κείμενο-μετασχηματισμός: κεφαλαία? option.last font-style: italic;
.τελευταίος τάξη από το προηγούμενο τελευταίο στοιχείο στο τρέχον.:τελευταίο παιδί ψευδο-τάξη είναι πολύ χρήσιμη πράγματι. Έτσι, εμείς δεν χρειάζεται να αναφέρει το τελευταίο στοιχείο στον κώδικα HTML, μπορούμε όμως να τα στυλίσουμε με το ακόλουθο CSS: li: τελευταίο παιδί text-transform: κεφαλαία; επιλογή: τελευταίο παιδί font-style: italic;
Κύριοι τύποι ψευδοκλάδων
1. Δυναμικές ψευδο-κλάσεις
:φτερουγίζω, :Συγκεντρώνω, :Σύνδεσμος, και : επισκέφθηκε, όλα τα οποία μπορούν να προστεθούν στο ετικέτα αγκύρωσης. α: επισκέφθηκε χρώμα: # 8D20AE; .button: hover, .button: εστίαση font-weight: bold;
2. Ψευδοκλάδους που βασίζονται στην πολιτεία
:τετραγωνισμένος που μπορεί να εφαρμοστεί για πλαίσια ελέγχου ():ΠΛΗΡΗΣ ΟΘΟΝΗ για να στοχεύσετε οποιοδήποτε στοιχείο εμφανίζεται αυτήν τη στιγμή σε λειτουργία πλήρους οθόνης:άτομα με ειδικές ανάγκες για στοιχεία HTML που μπορούν να βρίσκονται σε απενεργοποιημένη λειτουργία, όπως π.χ. , , και . :τετραγωνισμένος, το οποίο επισημαίνει εάν έχει επιλεγεί ένα πλαίσιο ελέγχου ή όχι. .πλαίσιο ελέγχου: ετικέτα + ετικέτα font-style: italic; είσοδος: απενεργοποιημένη background-color: #EEEEEE;
3. Διαρθρωτικές ψευδο-τάξεις
:πρώτο παιδί, :τελευταίο παιδί, και : n-παιδί (n) - όλα μπορούν να χρησιμοποιηθούν για να στοχεύσουν ένα συγκεκριμένο παιδικό στοιχείο μέσα σε ένα δοχείο με βάση τη θέση του - και :ρίζα το οποίο στοχεύει στο γονικό στοιχείο υψηλότερου επιπέδου στο DOM. 4. Διάφορες ψευδο-τάξεις
: όχι (x) το οποίο επιλέγει στοιχεία που δεν ταιριάζουν με τον επιλογέα x: lang (κωδικός γλώσσας) που επιλέγει στοιχεία των οποίων το περιεχόμενο είναι σε μια συγκεκριμένη γλώσσα: διεύθυνση (κατευθυντικότητα) που επιλέγει στοιχεία με περιεχόμενο συγκεκριμένης κατεύθυνσης (από αριστερά προς δεξιά ή από δεξιά προς τα αριστερά). p: lang (ko) χρώμα-φόντου: # FFFF00; : ρίζα χρώμα-φόντου: # FAEBD7;
nth-παιδί vs nth του τύπου Ψευδο-τάξεις
: n-παιδί και : n-of-type ψευδο-τάξεις.: n-of-παιδιού (n) στοχεύει ένα στοιχείο που είναι το το δεύτερο παιδί του γονικού στοιχείου, και : n-ο-τύπου (n) στόχων το δεύτερο από τα ίδιου τύπου του στοιχείου (όπως παράγραφοι) μέσα σε ένα γονικό στοιχείο. / * μια παράγραφο που είναι επίσης το δεύτερο παιδί μέσα στο γονικό της στοιχείο * / p: nth-child (2) χρώμα: # 1E90FF; // lightblue / * το δεύτερο εδάφιο μέσα σε ένα γονικό στοιχείο * / p: nth-of-type (2) font-weight:
Περίπτωση 1
nth-παιδί (2) κανόνας δεν θα ισχύει γι 'αυτό. Αν και είναι ένα δεύτερο παιδί, είναι δεν μία παράγραφος. nth-of-τύπου (2) θα ισχύει, καθώς αυτός ο κανόνας αναζητά μόνο το στοιχεία, και δεν ενδιαφέρεται για άλλα τύπους των στοιχείων (όπως μη ταξινομημένες λίστες) μέσα στο γονικό στοιχείο.nth-of-τύπου (2) κανόνας θα στυλ το δεύτερο εδάφιο που είναι Child 3.
Μη τακτοποιημένος κατάλογος 1, παιδί 2
Περίπτωση 2
: nth-παιδί (2) και το : nth-of-τύπου (2) θα εφαρμοστούν κανόνες, καθώς η δεύτερη παράγραφος είναι επίσης το δεύτερο παιδί του γονέα της
Μη τακτοποιημένος κατάλογος 1, παιδί 3
: n-of-παιδιού και : n-of-type ψευδο-τάξεις, το CSS Tricks έχει μια μεγάλη θέση σε αυτό. Εάν χρησιμοποιείτε το SASS, το Family.scss μπορεί να σας βοηθήσει να δημιουργήσετε περίπλοκες nth-παιδί'ανιχνευμένα στοιχεία.Ψευδο-κλάσεις εναντίον ψευδο-στοιχείων
Ψευδο-στοιχεία, όπως ::πριν και ::μετά (δείτε αυτό το σεμινάριο σχετικά με τον τρόπο χρήσης τους) είναι επίσης προστίθενται από τους πράκτορες χρήστη, και μπορούν να στοχευθούν και να σχεδιαστούν με το CSS όπως και ψευδο-τάξεις. ::πριν και ::μετά) ή μόνο ως ορισμένα τμήματα των υπαρχόντων στοιχείων (π.χ. ::πρώτο γράμμα ή :: placeholder). ::, ενώ οι ψευδο-τάξεις αναγνωρίζονται με ένα μόνο κόλον :.1. Η θέση τους στην ακολουθία επιλογών CSS
ul>: last-child.red χρώμα: # B0171F;
ul> .red: τελευταίο παιδί χρώμα: # B0171F;
.το κόκκινο) και το δεύτερο επιλέγει το τελευταίο παιδί μεταξύ των στοιχείων που κατέχουν .το κόκκινο τάξη μέσα ul> .red :: μετά display: block; περιεχόμενο: 'κόκκινο'; χρώμα: # B0171F;
αντικείμενα με την τάξη .το κόκκινο. ul> :: after.red εμφάνιση: μπλοκ; περιεχόμενο: 'κόκκινο'; χρώμα: # B0171F;
2. Αριθμός περιστατικών σε μια ακολουθία επιλογής
:πρώτο παιδί και :μόνο για ανάγνωση με τον ακόλουθο τρόπο: : πρώτο παιδί: μόνο για ανάγνωση χρώμα: #EEEEEE;
Επεκτάσεις επιλογής jQuery
: η σύνταξη δεν αποτελεί πάντοτε μια σωστή ψευδο-τάξη CSS. Αν έχετε χρησιμοποιήσει ποτέ jQuery, ίσως έχετε χρησιμοποιήσει πολλούς από τους επιλογείς του : σύνταξη, για παράδειγμα $ (': πλαίσιο ελέγχου'), $ (': είσοδος') και $ (': επιλεγμένο'). / * Αλλάξτε τη γραμματοσειρά όλων των στοιχείων HTML που σχετίζονται με την εισαγωγή, όπως το κουμπί, επιλέξτε και εισάγετε * / $ (": input") .css ("font-family", "courier new")
