CSS Szelektorok
CSS Szelektorok
A szelektor motor feldolgozza a CSS szelektor szöveget strukturált formába, és kiértékeli azt a DOM fákon. Támogatja mind a közvetlen lekérdezéseket, mind a kaszkád szabály-illesztését.
Szelektorok futtatása
select() kiértékeli a szelektort egy fára nézve, és visszaadja a találatokat; element_matches() egyetlen elemet tesztel. Mindkettő elfogadja a szabványos szelektor szintaxist — type, class, id, attribute, és pseudo-class szelektorok, beleértve az összetett és komplex kombinációkat.
Feldolgozott szelektor struktúrák
parse() egy SelectorList-t hoz létre a ComplexSelector és CompoundSelector bejegyzésekből, amelyek a TypeSelector, ClassSelector, IDSelector, AttributeSelector (a AttributeOperator használatával), UniversalSelector és Combinator részekből állnak.
Pszeudo-osztályok
Funkcionális pszeudoosztályok explicit módon modellezve: IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, és a struktúrális nth-child változatok a NthFilteredChildPseudoClass segítségével, NthArgument használatával.
Specificity
specificity() kiszámítja a selector szabványos háromkomponensű tuple-ját, és max_specificity() redukál egy listát; match() összehangolja a parsingot és az értékelést. Ezek ugyanazok az értékek, amelyeket a kaszkád használ, így a lekérdezési eredmények és a számított stílusok mindig egyeznek.
Tippek és bevált gyakorlatok
- Használd a
element_matches()-t a szűrőkben aselect()minden elemre történő újrafuttatása helyett. - Elemezz egyszer, és használd újra a
SelectorList-t, amikor ugyanaz a selector számos fán fut. - Ha egy szabály váratlanul elveszíti a kaszkádot, hasonlítsd össze közvetlenül a
specificity()értékeket.
Gyakori problémák
| Probléma | Ok | Javítás |
|---|---|---|
| A selector nem egyezik semmivel | Szintaktikai hiba a selector szövegében | parse() raises via syntax_error — ellenőrizze az üzenetet |
| Az egyenlő specifikusságú döntetlenek “rosszul” oldják fel | Sorrendfüggőség | A későbbi szabályok nyerik a döntetleneket; ellenőrizd a szabály sorrendjét |
:is() vs :where() zavar | :where() nulla specifikusságot ad hozzá | Válaszd az előirányzott kaszkád súly alapján |
FAQ
Hogyan tesztelhetek egy elemet egy szelektor ellen?
element_matches() — visszaad egy logikai értéket anélkül, hogy bejárná a fát.
Hogyan számítják ki a specifikusságot?
specificity() visszaadja a szabványos (id, class, type) komponens tuple-t; :where() csoportok nullát adnak hozzá.
Melyik pszeudo-osztályok támogatottak?
A struktúrált formák a API-ban: :is(), :where(), :has(), :not() összetett argumentumokkal, valamint nth-child-stílusú struktúraszelektorok.
API Reference Összegzés
| Osztály/Módszer | Leírás |
|---|---|
select | Értékeld a szelektort egy fára |
element_matches | Tesztelj egy elemet |
parse | A selector szöveget egy SelectorList formába alakítja |
specificity | Számolja ki a specifikusság tuple-ot |
HasPseudoClass | Strukturált :has() forma |
AttributeSelector | Attribútum-illesztő operátorokkal |