CSS Selektorer
CSS Selektorer
Selektormotorn tolkar CSS selektortext till strukturerad form och utvärderar den mot DOM-träd. Den stödjer både direkta frågor och cascadens regelmatchning.
Körning av selektorer
select() utvärderar en selektor mot ett träd och returnerar matchningar; element_matches() testar ett enskilt element. Båda accepterar standardselektorsyntax — typ-, klass-, id-, attribut- och pseudoklassselektorer, inklusive sammansatta och komplexa kombinationer.
Parserade selektorsstrukturer
parse() producerar en SelectorList av ComplexSelector och CompoundSelector poster byggda från TypeSelector, ClassSelector, IDSelector, AttributeSelector (med AttributeOperator), UniversalSelector och Combinator delar.
Pseudo-klasser
Funktionella pseudo-klasser modelleras explicit: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, och strukturella nth-child-varianter via NthFilteredChildPseudoClass med NthArgument.
Specificity
specificity() beräknar den standardiserade trekomponentstupletten för en selektor, och max_specificity() reducerar en lista; match() binder samman parsning och utvärdering. Detta är samma värden som kaskaden använder, så frågeresultat och beräknade stilar är alltid överens.
Tips och bästa praxis
- Använd
element_matches()i filter istället för att köra omselect()för varje element - Parsa en gång och återanvänd
SelectorListnär samma selektor körs mot många träd - När en regel oväntat förlorar kaskaden, jämför
specificity()-värden direkt
Vanliga problem
| Problem | Orsak | Åtgärd |
|---|---|---|
| Selektorn matchar inget | Syntaxfel i selektortext | parse() genereras via syntax_error — kontrollera meddelandet |
| Lika specificitet ger felaktig upplösning | Ordningberoende | Senare regler vinner oavgjort; kontrollera regelordning |
:is() vs :where() förvirring | :where() bidrar med noll specificitet | Välj efter avsedd kaskadvikt |
FAQ
Hur testar jag ett element mot en selektor?
element_matches() — den returnerar ett boolean utan att skanna trädet.
Hur beräknas specificitet?
specificity() returnerar den standard (id, class, type) komponenttupeln; :where() grupper bidrar med noll.
Vilka pseudo-klasser stöds?
De strukturerade formerna i API: :is(), :where(), :has(), :not() med komplexa argument, och strukturella selektorer i nth-child-stil.
API Reference Sammanfattning
| Klass/Metod | Beskrivning |
|---|---|
select | Utvärdera en selector mot ett träd |
element_matches | Testa ett element |
parse | Analysera selector-text till en SelectorList |
specificity | Beräkna specificitetstuplet |
HasPseudoClass | Strukturerad :has() form |
AttributeSelector | Attributmatchning med operatorer |