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 a select() 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émaOkJavítás
A selector nem egyezik semmivelSzintaktikai hiba a selector szövegébenparse() raises via syntax_error — ellenőrizze az üzenetet
Az egyenlő specifikusságú döntetlenek “rosszul” oldják felSorrendfüggőségA 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ódszerLeírás
selectÉrtékeld a szelektort egy fára
element_matchesTesztelj egy elemet
parseA selector szöveget egy SelectorList formába alakítja
specificitySzámolja ki a specifikusság tuple-ot
HasPseudoClassStrukturált :has() forma
AttributeSelectorAttribútum-illesztő operátorokkal

Lásd még:

 Magyar