CSS Selectori
CSS Selectori
Motorul de selectare analizează textul selectorului CSS într-o formă structurată și îl evaluează împotriva arborilor DOM. Acesta susține atât interogările directe, cât și potrivirea regulilor în cascadă.
Rularea selectorilor
select() evaluează un selector față de un arbore și returnează potrivirile; element_matches() testează un singur element. Ambele acceptă sintaxa standard a selectorilor — tip, clasă, id, atribut și pseudo-clasă, inclusiv combinații compuse și complexe.
Structuri de selectori analizate
parse() produce un SelectorList de ComplexSelector și CompoundSelector intrări construite din TypeSelector, ClassSelector, IDSelector, AttributeSelector (cu AttributeOperator), UniversalSelector și Combinator părți.
Pseudo-clase
Pseudo-clasele funcționale sunt modelate explicit: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, și variantele structurale nth-child prin NthFilteredChildPseudoClass cu NthArgument.
Specificity
specificity() calculează tupla standard cu trei componente pentru un selector, iar max_specificity() reduce o listă; match() leagă parsarea și evaluarea împreună. Acestea sunt aceleași valori pe care le folosește cascada, astfel încât rezultatele interogărilor și stilurile calculate sunt întotdeauna în acord.
Sfaturi și bune practici
- Folosește
element_matches()în interiorul filtrelor în loc să rulezi din nouselect()pentru fiecare element - Parsează o singură dată și reutilizează
SelectorListcând același selector rulează pe multe arbori - Când o regulă pierde în mod neașteptat cascadele, compară direct valorile
specificity()
Probleme comune
| Problemă | Cauză | Remediere |
|---|---|---|
| Selectorul nu se potrivește cu nimic | Eroare de sintaxă în textul selectorului | parse() ridică prin syntax_error — verificați mesajul |
| Legăturile cu specificitate egală rezolvă “wrong” | Dependență de ordine | Regulile ulterioare câștigă legăturile; verificați ordinea regulilor |
Confuzie :is() vs :where() | :where() contribuie cu zero specificitate | Alege în funcție de greutatea cascadei intenționate |
FAQ
Cum testez un element față de un selector?
element_matches() — returnează un boolean fără a scana arborele.
Cum se calculează specificitatea?
specificity() returnează tupla standard a componentelor (id, class, type); grupurile :where() contribuie cu zero.
Ce pseudo-clase sunt suportate?
Formele structurate în API: :is(), :where(), :has(), :not() cu argumente complexe și selectori structurali în stilul nth-child.
Rezumat API Reference
| Clasă/Metodă | Descriere: |
|---|---|
select | Evaluează un selector față de un arbore |
element_matches | Testează un element |
parse | Analizează textul selectorului într-un SelectorList |
specificity | Calculaţi tuplul de specificitate |
HasPseudoClass | Formă :has() structurată |
AttributeSelector | Potrivire de atribute cu operatori |