ToolHub
Ouvrir l'outil

Calculateur de spécificité CSS

Calculer et comparer les scores de spécificité des sélecteurs CSS, avec décomposition visuelle

Outils développeur
Lancer l'outil Tous les outils

À propos de cet outil

Le calculateur de spécificité CSS vous permet de saisir n'importe quel sélecteur CSS et de voir instantanément son score de spécificité, décomposé en trois dimensions : ID, classe et élément. Il prend en charge la comparaison côte à côte de deux sélecteurs, détecte automatiquement le gagnant en termes de spécificité, et fournit des exemples de sélecteurs courants et une référence des règles de spécificité.

Principales fonctionnalités

Aperçu rapide

Cas d'utilisation

css specificity selector

Questions fréquentes

Qu'est-ce que la spécificité CSS ?

La spécificité CSS est un système de score utilisé pour déterminer quelles règles CSS s'appliquent lorsque plusieurs sélecteurs ciblent le même élément. Il calculé le poids en fonction du type de sélecteur : les sélecteurs ID ont le poids le plus élevé, suivis des sélecteurs de classe et d'attribut, puis des sélecteurs d'élément.

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

La spécificité est calculée sous forme de score en trois parties (ID, classe, élément). Chaque sélecteur ID ajouté 1 à la colonne ID, chaque sélecteur de classe, d'attribut ou de pseudo-classe ajouté 1 à la colonne classe, chaque sélecteur d'élément ou de pseudo-élément ajouté 1 à la colonne élément.

!important remplace-t-il la spécificité ?

Oui, la déclaration !important remplace tous les calculs de spécificité normaux. Lorsque plusieurs règles !important entrent en conflit, celle avec la spécificité la plus élevée l'emporte. Les styles en ligne remplacent également toute la spécificité basée sur les sélecteurs.

Puis-je comparer deux sélecteurs côte à côte ?

Oui, l'outil fournit un panneau de comparaison côte à côte où vous pouvez saisir deux sélecteurs et voir instantanément lequel à la spécificité la plus élevée. Un marqueur de gagnant s'affiché automatiquement à côté du sélecteur avec le score le plus élevé.

Quels types de sélecteurs le calculateur prend-il en charge ?

Le calculateur prend en charge les sélecteurs ID, les sélecteurs de classe, les sélecteurs d'attribut, les pseudo-classes (telles que :hover et :nth-child), les sélecteurs d'élément et les pseudo-éléments (tels que ::before et ::after). Il fournit également des exemples courants que vous pouvez remplir en un clic.

Outils associés

Validateur JSONSélecteur de couleursGénérateur de hachageGénérateur UUID