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écuterselect()par élément - Analysez une fois et réutilisez le
SelectorListlorsque 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ème | Cause | Correction |
|---|---|---|
| Le sélecteur ne correspond à rien | Erreur de syntaxe dans le texte du sélecteur | parse() génère via syntax_error — vérifiez le message |
| Les égalités de spécificité aboutissent à “wrong” | Dépendance à l’ordre | Les 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éthode | Description |
|---|---|
select | Évaluer un sélecteur sur un arbre |
element_matches | Tester un élément |
parse | Analyser le texte du sélecteur en un SelectorList |
specificity | Calculer le tuple de spécificité |
HasPseudoClass | Forme :has() structurée |
AttributeSelector | Correspondance d’attributs avec opérateurs |