Φύλλο εξαπάτησης CSS Selectors

Στο CSS, οι επιλογείς είναι μοτίβα που χρησιμοποιούνται για την επιλογή στοιχείων DOM.

Ακολουθεί ένα παράδειγμα χρήσης επιλογών. Στον ακόλουθο κώδικα, aκαι h1είναι επιλογείς:

a { color: black; } h1 { font-size 24px; }

Cheat φύλλο κοινών επιλογών

headεπιλέγει το στοιχείο με την headετικέτα

.red επιλέγει όλα τα στοιχεία με την «κόκκινη» τάξη

#nav επιλέγει τα στοιχεία με το "nav" Id

div.rowεπιλέγει όλα τα στοιχεία με την divετικέτα και την κλάση «σειρά»

["]επιλέγει όλα τα στοιχεία με το aria-hiddenχαρακτηριστικό με τιμή "true"

  • Επιλογέας μπαλαντέρ. Επιλέγει όλα τα στοιχεία DOM. Δείτε παρακάτω για να το χρησιμοποιήσετε με άλλους επιλογείς

Μπορούμε να συνδυάσουμε τους επιλογείς με ενδιαφέροντες τρόπους

Μερικά παραδείγματα:

li aΣυνδυαστής απογόνων DOM. Όλες οι aετικέτες που είναι θυγατρικές liετικετών

div.row *επιλέγει όλα τα στοιχεία που είναι απόγονοι (ή παιδί) των στοιχείων με divετικέτα και κλάση «σειρά»

li > aΣυνδυαστής διαφορών. Επιλέξτε άμεσους απογόνους, αντί για όλους τους απογόνους, όπως οι επιλογείς απογόνων

li + aΟ παρακείμενος συνδυαστής. Επιλέγει το στοιχείο που προηγείται αμέσως από το προηγούμενο στοιχείο. Σε αυτήν την περίπτωση, μόνο το πρώτο aμετά το καθένα li.

li, aΕπιλέγει όλα τα aστοιχεία και όλα τα liστοιχεία.

li ~ aΟ συνδυασμός αδελφών. Επιλέγει το aστοιχείο μετά από ένα liστοιχείο.

Ψευδο-επιλογείς ή ψευδο δομικές τάξεις

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

Εδώ είναι μερικά από αυτά:

:first-child Στοχεύστε το πρώτο στοιχείο αμέσως μέσα (ή το παιδί) ενός άλλου στοιχείου

:last-child Στοχεύστε το τελευταίο στοιχείο αμέσως μέσα (ή το παιδί) ενός άλλου στοιχείου

:nth-child()Στοχεύστε το ένατο στοιχείο αμέσως μέσα (ή το παιδί) ενός άλλου στοιχείου Παραδέχεται ακέραιοι, even, odd, ή τύπους

a:not(.name)Επιλέγει όλα τα aστοιχεία που δεν ανήκουν στην .nameτάξη

::afterΕπιτρέπει την εισαγωγή περιεχομένου σε μια σελίδα από CSS, αντί για HTML. Ενώ το τελικό αποτέλεσμα δεν βρίσκεται στην πραγματικότητα στο DOM, εμφανίζεται στη σελίδα σαν να είναι. Αυτό το περιεχόμενο φορτώνεται μετά από στοιχεία HTML.

::beforeΕπιτρέπει την εισαγωγή περιεχομένου σε μια σελίδα από CSS, αντί για HTML. Ενώ το τελικό αποτέλεσμα δεν βρίσκεται στην πραγματικότητα στο DOM, εμφανίζεται στη σελίδα σαν να είναι. Αυτό το περιεχόμενο φορτώνεται πριν από στοιχεία HTML.

Μπορούμε να χρησιμοποιήσουμε ψευδο-τάξεις για να ορίσουμε μια ειδική κατάσταση ενός στοιχείου του DOM. Αλλά δεν δείχνουν μόνοι τους ένα στοιχείο.

Μερικά παραδείγματα:

:hover επιλέγει ένα στοιχείο που αιωρείται από ένα δείκτη του ποντικιού

:focus επιλέγει ένα στοιχείο που λαμβάνει εστίαση από το πληκτρολόγιο ή μέσω προγραμματισμού

:active επιλέγει ένα στοιχείο στο οποίο γίνεται κλικ από ένα δείκτη του ποντικιού

:link επιλέγει όλους τους συνδέσμους στους οποίους δεν έχει γίνει ακόμη κλικ

:visited επιλέγει έναν σύνδεσμο στον οποίο έχει ήδη γίνει κλικ

Περισσότερες πληροφορίες σχετικά με τον επιλογέα 9ου παιδιού

Ο nth-childεπιλογέας είναι ένα css psuedo-class που παίρνει ένα μοτίβο με το οποίο ταιριάζει με ένα ή περισσότερα στοιχεία σε σχέση με τη θέση τους μεταξύ των αδελφών.

Σύνταξη

 a:nth-child(pattern) { /* Css goes here */ }

Πρότυπο

Τα μοτίβα που γίνονται αποδεκτά nth-childμπορούν να έχουν τη μορφή λέξεων-κλειδιών ή εξίσωσης της μορφής An + B

Λέξεις-κλειδιά

Περιττός

Odd επιστρέφει όλα τα περίεργα στοιχεία ενός δεδομένου τύπου.

 a:nth-childe(odd) { /* CSS goes here */ }
Ακόμη και

Ακόμη και επιστρέφει όλα τα ομοιόμορφα στοιχεία ενός δεδομένου τύπου

 a:nth-childe(even) { /* CSS goes here */ }

Ένα + Β

Επιστρέφει όλα τα στοιχεία που ταιριάζουν με την εξίσωση An + B για κάθε θετική ακέραια τιμή του n (εκτός από το 0).

Για παράδειγμα, τα ακόλουθα θα ταιριάζουν με κάθε 3ο στοιχείο αγκύρωσης:

 a:nth-childe(3n) { /* CSS goes here */ }

Παιχνίδια

Το CSS Diner είναι ένα διαδικτυακό παιχνίδι που διδάσκει σχεδόν όλα όσα πρέπει να γνωρίζετε για το συνδυασμό επιλογών.

Πρόσθετες αναφορές

Υπάρχουν πολλοί περισσότεροι επιλογείς CSS! Μάθετε για αυτά στο CodeTuts, το CSS-tricks.com ή στο Mozilla Developer Network.