CSS Sélecteurs

CSS Sélecteurs

Le moteur de sélecteur analyse le texte de sélecteur CSS en forme structurée et l’évalue contre les arbres DOM. Il prend en charge à la fois les requêtes directes et la correspondance des règles de la cascade.


Exécution des sélecteurs

select() évalue un sélecteur par rapport à un arbre et renvoie les correspondances; element_matches() teste un seul élément. Les deux acceptent la syntaxe standard des sélecteurs — sélecteurs de type, de classe, d’id, d’attribut et de pseudo-classe, y compris les combinaisons composées et complexes.

Structures de sélecteurs analysés

parse() produit un SelectorList de ComplexSelector et CompoundSelector entrées construites à partir de TypeSelector, ClassSelector, IDSelector, AttributeSelector (avec AttributeOperator), UniversalSelector et Combinator parties.

Pseudo-classes

Les pseudo-classes fonctionnelles sont modélisées explicitement : IsPseudoClass, WherePseudoClass, HasPseudoClass, ComplexNotPseudoClass, et les variantes structurelles nth-child via NthFilteredChildPseudoClass avec NthArgument.

Specificity

specificity() calcule le triplet standard à trois composantes pour un sélecteur, et max_specificity() réduit une liste; match() lie l’analyse et l’évaluation ensemble. Ce sont les mêmes valeurs utilisées par la cascade, donc les résultats des requêtes et les styles calculés sont toujours d’accord.


Conseils et bonnes pratiques

  • Utilisez element_matches() à l’intérieur des filtres au lieu de réexécuter select() par élément
  • Analysez une fois et réutilisez le SelectorList lorsque le même sélecteur s’exécute sur de nombreux arbres
  • Lorsqu’une règle perd la cascade de façon inattendue, comparez directement les valeurs specificity()

Problèmes courants

ProblèmeCauseCorrection
Le sélecteur ne correspond à rienErreur de syntaxe dans le texte du sélecteurparse() génère via syntax_error — vérifiez le message
Les égalités de spécificité aboutissent à “wrong”Dépendance à l’ordreLes règles ultérieures l’emportent en cas d’égalité ; vérifiez l’ordre des règles
:is() vs :where() confusion:where() contribue à zéro spécificitéChoisissez en fonction du poids de cascade prévu

FAQ

Comment tester un élément contre un sélecteur?

element_matches() — il renvoie un booléen sans parcourir l’arbre.

Comment la spécificité est-elle calculée?

specificity() renvoie le tuple de composantes standard (id, class, type); les groupes :where() contribuent à zéro.

Quelles pseudo-classes sont prises en charge?

Les formes structurées dans le API: :is(), :where(), :has(), :not() avec des arguments complexes, et les sélecteurs structurels de type nth-child.


API Reference Résumé

Classe/MéthodeDescription
selectÉvaluer un sélecteur sur un arbre
element_matchesTester un élément
parseAnalyser le texte du sélecteur en un SelectorList
specificityCalculer le tuple de spécificité
HasPseudoClassForme :has() structurée
AttributeSelectorCorrespondance d’attributs avec opérateurs

Voir aussi

 Français