Herramientas de desarrollo de Chrome: ¿cómo averiguar qué está reemplazando una regla de CSS?

Bueno, esto es bastante sencillo. Si las herramientas para desarrolladores de Chrome me muestran que un estilo está anulado, ¿cómo ver qué regla CSS lo está anulando?

Quiero saber si hay algo así como “Muéstrame qué anula esto” .

OBS: Por favor, no me apunte a Firebug.

Use el panel de Estilo Computado del inspector de elementos. Expanda la propiedad de interés para ver la lista de reglas aplicables y cuál ganó.

Captura de pantalla de Chrome

Simplemente puede ver los que tienen el mismo nombre que no están marcados, recuerde que el listado es por importancia.

O puede ver los estilos calculados. Serán los estilos aplicados realmente.

crtrl + shift + c e inspeccionar el elemento. Luego encuentra el estilo sin una línea a través de él, en el cuadro en la esquina inferior derecha.

la anulación es en la mayoría de los casos en la parte superior (y sin una línea, ya que este estilo es el “ganador”).