Calcula la especificidad CSS y qué regla gana
Pega selectores para contar su especificidad, o pega CSS y un elemento para ver la regla que se aplica.
- Funciona en tu dispositivo
- Sin registro
- Funciona sin conexión después de una visita
Los estilos predeterminados del navegador y otras hojas de estilo no están incluidos. No se envía nada.
| Selector | Especificidad | Peso | Contexto |
|---|
| Regla | Valor | Especificidad | Capa | Resultado |
|---|
Cómo calcular qué regla CSS gana
- Elige un modo: contar selectores o buscar la regla ganadora.
- Pega los selectores, o el CSS, el HTML y la propiedad.
- Lee la puntuación, o la regla ganadora y por qué perdió cada una de las demás.
Preguntas
¿Cómo se cuenta la especificidad?
Cada id cuenta 1,0,0, cada clase, atributo o pseudoclase 0,1,0, y cada nombre de elemento o pseudoelemento 0,0,1. El selector universal y :where() no suman nada.
¿Cómo cuentan :is(), :not() y :has()?
Cuentan como su argumento más fuerte. Así que :is(#a, .b) p puntúa 1,0,1, porque #a es la parte más fuerte dentro de :is(). La regla con :where(#a) p puntúa 0,0,1.
¿Por qué pierde una regla con capas frente a una regla normal?
En declaraciones normales, las reglas fuera de cualquier capa ganan a las reglas en capas. Con !important el orden se invierte, así que gana una capa anterior. Un atributo style normal gana a todas las reglas normales de hojas de estilo, y un atributo style con !important gana a todas las demás reglas !important.
¿Se envía mi CSS a algún sitio?
No. Tu navegador analiza y compara los selectores en esta pestaña, y no se envía nada a ningún servidor.
Reseñas
Aún no hay reseñas. Sé el primero.