Verificador CSS de Renderizado Real de la Regla GanadoraUsar el motor del navegador para verificar qué regla CSS gana

¿Por qué es necesario renderizar realmente, y no solo calcular?

La mayoría de las calculadoras de especificidad CSS en línea simplemente introducen tu selector en una fórmula y devuelven una puntuación — por ejemplo, #main p obtiene (1,0,1) y .card.active obtiene (0,2,0). Pero lo que realmente decide un navegador cuando varias reglas entran en conflicto también depende de la herencia, el orden de la cascada, !important, y de cómo se escribe cada propiedad en distintas reglas — todo esto lo ignoran las calculadoras teóricas. Esta herramienta adopta un enfoque diferente: renderiza el HTML y CSS que has pegado dentro de un iframe oculto para que el navegador aplique realmente los estilos, y luego lee el resultado real con getComputedStyle(). Lo que ves es lo que el navegador decidió de verdad, no una cifra calculada sobre el papel.

Cómo se compara realmente la puntuación (a, b, c) — un ejemplo resuelto

La especificidad CSS se expresa como tres números (a, b, c): a cuenta los selectores de ID, b cuenta los selectores de clase/atributo/pseudoclase, c cuenta los selectores de tipo/pseudoelemento. La comparación funciona como comparar cifras — quien tenga el valor 'a' más alto gana directamente, y solo se compara 'b' si 'a' está en empate. Por ejemplo, #main p obtiene (1,0,1) mientras que .card .title.active obtiene (0,3,0) — #main p gana igualmente porque 1 > 0 en 'a', aunque el otro selector acumule tres clases. Si dos reglas tienen exactamente la misma especificidad, el navegador aplica la que se definió más tarde en el CSS — por eso el orden de origen también importa. !important es lo único que anula por completo la especificidad: una regla con menor especificidad pero con !important vence a una regla con mayor especificidad que no lo tenga (a menos que la otra regla también tenga !important, en cuyo caso vuelve a decidir la especificidad).

¿Cuándo deberías usar realmente esta herramienta?

El desencadenante clásico es: 'escribí esta regla CSS y no cambió nada en pantalla' — lo que normalmente significa que otra regla con mayor especificidad (o !important) la está sobrescribiendo. Pega el HTML+CSS en conflicto, introduce el selector del elemento que estás depurando, y la herramienta listará todas las reglas coincidentes con su puntuación de especificidad, dejando que el motor real del navegador te diga cuál gana de verdad — ya no tendrás que adivinar qué capa de la cascada está ganando.

Esta herramienta renderiza dentro de un iframe aislado, sin fuentes, imágenes ni ejecución de JavaScript externas, y no admite Shadow DOM ni estilos CSS-in-JS inyectados dinámicamente — pega fragmentos estáticos de HTML/CSS para obtener resultados precisos.