CSS Selektory
CSS Selektory
Silnik selektorów parsuje tekst selektora CSS do ustrukturyzowanej formy i ocenia go względem drzew DOM. Obsługuje zarówno bezpośrednie zapytania, jak i dopasowywanie reguł kaskady.
Uruchamianie selektorów
select() ocenia selektor względem drzewa i zwraca dopasowania; element_matches() testuje pojedynczy element. Oba akceptują standardową składnię selektorów — selektory typu, klasy, identyfikatora, atrybutu i pseudo-klasy, w tym kombinacje złożone i skomplikowane.
Zparsowane struktury selektorów
parse() tworzy SelectorList ComplexSelector i CompoundSelector wpisów zbudowanych z TypeSelector, ClassSelector, IDSelector, AttributeSelector (z AttributeOperator), UniversalSelector oraz Combinator części.
Pseudo-klasy
Funkcjonalne pseudo-klasy są modelowane jawnie: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass oraz strukturalne warianty nth-child za pomocą NthFilteredChildPseudoClass z NthArgument.
Specificity
specificity() oblicza standardowy trójskładnikowy krotkę dla selektora, a max_specificity() redukuje listę; match() łączy parsowanie i ewaluację. Są to te same wartości używane przez kaskadę, więc wyniki zapytań i obliczone style zawsze się zgadzają.
Wskazówki i najlepsze praktyki
- Użyj
element_matches()wewnątrz filtrów zamiast ponownego uruchamianiaselect()dla każdego elementu - Parsuj raz i ponownie użyj
SelectorList, gdy ten sam selektor jest stosowany do wielu drzew - Gdy reguła nieoczekiwanie traci kaskadę, porównaj wartości
specificity()bezpośrednio
Typowe problemy
| Problem | Przyczyna | Naprawa |
|---|---|---|
| Selektor nie dopasowuje niczego | Błąd składni w tekście selektora | parse() zostaje podniesiony przez syntax_error — sprawdź komunikat |
| Powiązania o równej specyficzności rozstrzygają się „źle” | Zależność od kolejności | Późniejsze reguły wygrywają w przypadku remisu; sprawdź kolejność reguł |
:is() vs :where() zamieszanie | :where() przyczynia się do zerowej specyficzności | Wybierz zgodnie z zamierzoną wagą kaskady |
FAQ
Jak przetestować jeden element względem selektora?
element_matches() — zwraca wartość boolowską bez przeszukiwania drzewa.
Jak obliczana jest specyficzność?
specificity() zwraca standardową krotkę (id, class, type); grupy :where() wnoszą zero.
Jakie pseudo-klasy są obsługiwane?
Strukturalne formy w API: :is(), :where(), :has(), :not() z złożonymi argumentami oraz selektory strukturalne w stylu nth-child.
API Reference Podsumowanie
| Klasa/Metoda | Opis |
|---|---|
select | Oceń selektor względem drzewa |
element_matches | Test jednego elementu |
parse | Przetwórz tekst selektora na SelectorList |
specificity | Oblicz krotkę specyficzności |
HasPseudoClass | Ustrukturyzowana forma :has() |
AttributeSelector | Matcher atrybutów z operatorami |