CSS cheatsheet επιλογείς & λεπτομέρειες

Che cheatsheet επιλογέα CSS

Πρόσφατα, έχω καταδύσεις σε CSS επιλογείς.

Υπάρχουν πολλοί επιλογείς CSS με άγνωστα σύμβολα,>. , * + ~ [] κ.λπ., έτσι συχνά μπερδεύονταν για το πώς λειτουργούν οι επιλογείς CSS. Τελικά, τα ευθυγράμμισα στο κεφάλι μου και τα επανασχεδίασα όπως καταλαβαίνω.

* Στην πραγματικότητα, θα ήθελα να τα οργανώσω σε μια σελίδα μεγέθους A4 για να σώσω χαρτιά και να σώσω τη Γη, αλλά δεν μπορούσα, επειδή υπάρχουν τόσοι πολλοί επιλογείς που ήθελα να προσθέσω γι 'αυτό έπρεπε να προχωρήσω πάνω από μία σελίδα . Και οι τέσσερις σελίδες Α4, εκτός από τις σελίδες εξωφύλλου.

Εκτυπώστε αυτό το cheatsheet και κολλήστε τον στον τοίχο. Μην τις απομνημονεύσετε, απλά να πετάξετε. Ελπίζω αυτό το infographic να σας βοηθήσει να βρείτε γρήγορα τους σωστούς επιλογείς CSS και να εξοικονομήσετε χρόνο.

CSS cheatsheet επιλογέα επιλογώνCSS επιλογείς παιχνίδι από τον Ryan Yu

Πηγαίνετε για να κατεβάσετε το cheatsheet του επιλογέα CSS και να απολαύσετε το παιχνίδι🕹

Μην ανησυχείς. Είναι όλα δωρεάν.

Βυθιστείτε στον επιλογέα CSS.

Θα αναφερθώ στο infographic μαζί με τους ορισμούς MDN για να σας διευκολύνω.

Τύπος επιλογέα

Ο επιλογέας τύπου CSS ταιριάζει με στοιχεία ανά όνομα κόμβου. Με άλλα λόγια, επιλέγει όλα τα στοιχεία του δεδομένου τύπου μέσα σε ένα έγγραφο. - MDN

Τύπος επιλογέα

Επιλογή επιλογής

Επιλέγει ένα στοιχείο βασισμένο στην τιμή του χαρακτηριστικού id του. Θα πρέπει να υπάρχει μόνο ένα στοιχείο με ένα δεδομένο αναγνωριστικό σε ένα έγγραφο. - MDN

Επιλογή επιλογής

Επιλεγόμενος επιλογέας

Κάθε στοιχείο που ταιριάζει με το Β που είναι απόγονος ενός στοιχείου που ταιριάζει με το Α (δηλαδή παιδί ή παιδί ενός παιδιού κ.λπ.). ο συνδυαστής είναι ένα ή περισσότερα διαστήματα ή διπλάσια από τα σημεία. - MDN

Επιλεγόμενος επιλογέας

Συνδυάστε τους επιλογείς των απογόνων και αναγνωριστικών

Συνδυάστε τους επιλογείς των απογόνων και αναγνωριστικών

Επιλογή κατηγορίας

Ο επιλογέας κλάσης CSS ταιριάζει με στοιχεία που βασίζονται στο περιεχόμενο του χαρακτηριστικού κλάσης τους. - MDN

Επιλογή κατηγορίας

Συνδυάστε τον επιλογέα κλάσης

Συνδυάστε τον επιλογέα κλάσης

Comma Combinator

Οποιοδήποτε στοιχείο ταιριάζει με Α και / ή Β. - MDN

Comma Combinator

Ο γενικός επιλογέας

Απλά Επιλέξτε τα πάντα!

Ο γενικός επιλογέας

Συνδυάστε τον Universal Selector

Συνδυάστε τον Universal Selector

Προηγούμενος επιλογέας αδελφών

Ο γειτονικός συνδυασμός αδελφών (+) χωρίζει δύο επιλογείς και ταιριάζει με το δεύτερο στοιχείο μόνο αν ακολουθεί αμέσως το πρώτο στοιχείο και αμφότερα είναι παιδιά του ίδιου γονικού στοιχείου. - MDN

Προηγούμενος επιλογέας αδελφών

Γενικός επιλογέας αδελφών

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

Γενικός επιλογέας αδελφών

Παιδικός επιλογέας

Ο συνδυασμός παιδιών (>) τοποθετείται ανάμεσα σε δύο επιλογείς CSS. Αντιστοιχεί μόνο σε εκείνα τα στοιχεία που αντιστοιχούν στον δεύτερο επιλογέα που είναι τα παιδιά των στοιχείων που ταιριάζουν με το πρώτο. - MDN

Παιδικός επιλογέας

Πρώτος ψευδο-επιλογέας παιδιού

Η ψευδο-τάξη CSS πρώτου παιδιού αντιπροσωπεύει το πρώτο στοιχείο μεταξύ μιας ομάδας αδελφών στοιχείων. - MDN

Πρώτος ψευδο-επιλογέας παιδιού

Μόνο ψευδο-επιλογέας παιδιών

Η ψευδο-τάξη CSS μόνο παιδί αντιπροσωπεύει ένα στοιχείο χωρίς αδέλφια. Αυτό είναι το ίδιο με το: first-child: last-child ή nth-child (1): nth-last-child (1), αλλά με μικρότερη ειδικότητα. - MDN

Μόνο ψευδο-επιλογέας παιδιών

Ψευδο-επιλογέας τελευταίου παιδιού

Η ψευδο-τάξη CSS τελευταίου παιδιού αντιπροσωπεύει το τελευταίο στοιχείο μεταξύ μιας ομάδας αδελφών στοιχείων. - MDN

Ψευδο-επιλογέας τελευταίου παιδιού

Νεκτός ψευδο-επιλογέας παιδιού

Η ψευδο-τάξη CSS nth-child () ταιριάζει με στοιχεία που βασίζονται στη θέση τους σε μια ομάδα αδελφών. - MDN

Νεκτός ψευδο-επιλογέας παιδιού

Nth Selector του τελευταίου παιδιού

Η ψευδο-τάξη CSS: nth-last-child () ταιριάζει με βάση τη θέση τους σε μια ομάδα αδελφών, μετρώντας από το τέλος. - MDN

Nth Selector του τελευταίου παιδιού

Πρώτη επιλογή τύπου

Η ψευδο-τάξη CSS πρώτου τύπου αντιπροσωπεύει το πρώτο στοιχείο του τύπου της μεταξύ μιας ομάδας αδελφών στοιχείων. - MDN

Πρώτη επιλογή τύπου

Nth του επιλογέα τύπων

Η ψευδο-τάξη CSS του nth-type () ταιριάζει στοιχεία ενός δεδομένου τύπου, με βάση τη θέση τους σε μια ομάδα αδελφών. - MDN

Nth του επιλογέα τύπων

Selector N-type με τύπο

Nth-of-type Selector
 Σημείωση:
: nth-of-τύπου (ζυγός)
: nth-of-type (περίεργο)
: nth-of-τύπου (2)
: n-ο-τύπου (2n)
: n-ο-τύπου (3n-1)
: n-ο-τύπου (2n + 2)

Μόνο τύπου επιλογής

Η ψευδο-τάξη CSS τύπου μόνο αντιπροσωπεύει ένα στοιχείο που δεν έχει αδέλφια του ίδιου τύπου. - MDN

Μόνο τύπου επιλογής

Τελευταία επιλογή τύπου

Η ψευδο-τάξη CSS τελευταίου τύπου αντιπροσωπεύει το τελευταίο στοιχείο του τύπου μεταξύ μιας ομάδας αδελφών στοιχείων. - MDN

Τελευταία επιλογή τύπου

Αδειάστε τον επιλογέα

Η: κενή ψευδο-τάξη CSS αντιπροσωπεύει οποιοδήποτε στοιχείο που δεν έχει παιδιά. Τα παιδιά μπορούν να είναι είτε κόμβοι στοιχείων είτε κείμενο (συμπεριλαμβανομένων των κενών διαστημάτων). Τα σχόλια, οι οδηγίες επεξεργασίας και το περιεχόμενο CSS δεν επηρεάζουν το αν ένα στοιχείο θεωρείται κενό. - MDN

Αδειάστε τον επιλογέα

Αρνητική ψευδο-τάξη

Η ψευδο-τάξη CSS δεν () αντιπροσωπεύει στοιχεία που δεν ταιριάζουν με μια λίστα επιλογών. Αφού αποτρέπει την επιλογή ειδικών αντικειμένων, είναι γνωστή ως ψευδο-κατηγορία άρνησης. - MDN

Αρνητική ψευδο-τάξη

Επιλογή επιλογής

Οι επιλογείς χαρακτηριστικών είναι ένα ειδικό είδος επιλογέα που θα ταιριάζει με στοιχεία βάσει των χαρακτηριστικών τους και των τιμών χαρακτηριστικών τους. Η γενική σύνταξή τους αποτελείται από αγκύλες ([]) που περιέχουν ένα όνομα χαρακτηριστικού ακολουθούμενο από μια προαιρετική συνθήκη που ταιριάζει με την τιμή του χαρακτηριστικού. Οι επιλογείς χαρακτηριστικών μπορούν να χωριστούν σε δύο κατηγορίες ανάλογα με τον τρόπο με τον οποίο ταιριάζουν οι τιμές χαρακτηριστικών: Επιλογή επιλογής παρουσίας και τιμής και επιλογείς χαρακτηριστικών αξίας υποστυλώματος. - MDN

Επιλογή επιλογής

Επιλογή επιλογής χαρακτηριστικών

Επιλογή επιλογής χαρακτηριστικών

Το χαρακτηριστικό ξεκινά με τον επιλογέα

Αυτός ο επιλογέας θα επιλέξει όλα τα στοιχεία με το χαρακτηριστικό attr για το οποίο η τιμή αρχίζει με val. - MDN

Το χαρακτηριστικό ξεκινά με τον επιλογέα

Το χαρακτηριστικό τελειώνει με τον επιλογέα

Αυτός ο επιλογέας θα επιλέξει όλα τα στοιχεία με το χαρακτηριστικό attr για το οποίο η τιμή λήγει με val. - MDN

Το χαρακτηριστικό τελειώνει με τον επιλογέα

Χαρακτήρας επιλογής μπαλαντέρ

Αυτός ο επιλογέας θα επιλέξει όλα τα στοιχεία με το χαρακτηριστικό attr για το οποίο η τιμή περιέχει το substring val. (Μια υποζώνη είναι απλά μέρος μιας συμβολοσειράς, π.χ. "cat" είναι ένα υποσύνολο στη συμβολοσειρά "caterpillar".) - MDN

Χαρακτήρας επιλογής μπαλαντέρ

Συγχαρητήρια, έχετε ολοκληρώσει το

Άρθρα

🕹 CodePen

Οποιεσδήποτε ερωτήσεις ή σχόλια

Θα ήθελα πολύ να ακούσω τα σχόλιά σας για το πώς μπορώ να τα καταφέρω καλύτερα. Παρακαλώ αφήστε τα σχόλιά σας παρακάτω ή μέσω του Twitter μου.

Ευχαριστώ πολύ τον Ryan Yu για τη βοήθειά μου να κάνω παιχνίδι επιλογής CSS. Ο Ryan Yu είναι ο συντάκτης του όπου έμαθα πολλές δροσερές τεχνικές front-end.

Happy codesign σήμερα