CSS Επιλογείς
CSS Επιλογείς
Η μηχανή επιλογέων αναλύει το κείμενο επιλογέα CSS σε δομημένη μορφή και το αξιολογεί έναντι δέντρων DOM. Υποστηρίζει τόσο άμεσες ερωτήσεις όσο και την αντιστοίχιση κανόνων της αλυσίδας.
Εκτέλεση Επιλογέων
select() αξιολογεί έναν επιλογέα έναντι ενός δέντρου και επιστρέφει τα αποτελέσματα· element_matches() δοκιμάζει ένα μοναδικό στοιχείο. Και τα δύο δέχονται τη στάνταρ σύνταξη επιλογέων — τύπου, κλάσης, id, χαρακτηριστικού και ψευδο-κλάσης, συμπεριλαμβανομένων σύνθετων και πολύπλοκων συνδυασμών.
Δομές Αναλυμένων Επιλογέων
parse() παράγει ένα SelectorList από ComplexSelector και CompoundSelector εγγραφές που δημιουργούνται από TypeSelector, ClassSelector, IDSelector, AttributeSelector (με AttributeOperator), UniversalSelector και Combinator μέρη.
Ψευδο-Κλάσεις
Οι λειτουργικές ψευδο-κατηγορίες μοντελοποιούνται ρητά: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, και οι δομικές παραλλαγές nth-child μέσω του NthFilteredChildPseudoClass με NthArgument.
Specificity
specificity() υπολογίζει το τυπικό τριπλό πλέγμα για έναν επιλογέα, και το max_specificity() μειώνει μια λίστα· το match() συνδέει την ανάλυση και την αξιολόγηση μαζί. Αυτές είναι οι ίδιες τιμές που χρησιμοποιεί η κατάρρευση, έτσι τα αποτελέσματα ερωτημάτων και τα υπολογισμένα στυλ συμφωνούν πάντα.
Συμβουλές και Καλές Πρακτικές
- Χρησιμοποιήστε το
element_matches()μέσα στα φίλτρα αντί να επανατρέχετε τοselect()ανά στοιχείο - Αναλύστε μία φορά και επαναχρησιμοποιήστε το
SelectorListόταν ο ίδιος επιλογέας εκτελείται εναντίον πολλών δέντρων - Όταν ένας κανόνας χάνει απρόσμενα την κατάρρευση, συγκρίνετε άμεσα τις τιμές του
specificity()
Κοινά Προβλήματα
| Πρόβλημα | Αιτία | Διόρθωση |
|---|---|---|
| Ο επιλογέας δεν ταιριάζει με τίποτα | Συντακτικό σφάλμα στο κείμενο του επιλογέα | parse() εγείρει μέσω syntax_error — ελέγξτε το μήνυμα |
| Ισοδυναμίες ίσης ειδικότητας λύνουν “wrong” | Εξάρτηση από τη σειρά | Οι μεταγενέστεροι κανόνες κερδίζουν ισοπαλίες· ελέγξτε τη σειρά των κανόνων |
Σύγχυση :is() vs :where() | :where() συμβάλλει σε μηδενική ειδικότητα | Επιλέξτε ανάλογα με το προοριζόμενο βάρος κατάρρευσης |
FAQ
Πώς μπορώ να ελέγξω ένα στοιχείο έναντι ενός επιλογέα;
element_matches() — επιστρέφει boolean χωρίς σάρωση του δέντρου.
Πώς υπολογίζεται η ειδικότητα;
specificity() επιστρέφει την τυπική (id, class, type) πλειάδα συνιστωσών· :where() ομάδες συνεισφέρουν μηδέν.
Ποιες ψευδο-τάξεις υποστηρίζονται;
Οι δομημένες μορφές στο API: :is(), :where(), :has(), :not() με σύνθετα επιχειρήματα, και δομικοί επιλογείς τύπου nth-child.
Σύνοψη API Reference
| Κλάση/Μέθοδος | Περιγραφή |
|---|---|
select | Αξιολογήστε έναν επιλογέα έναντι ενός δέντρου |
element_matches | Δοκιμή ενός στοιχείου |
parse | Αναλύστε το κείμενο του επιλογέα σε ένα SelectorList |
specificity | Υπολογίστε την πλειάδα εξειδίκευσης |
HasPseudoClass | Δομημένη μορφή :has() |
AttributeSelector | Αντιστοιχία χαρακτηριστικού με τελεστές |