Herramientas para desarrolladores de Chrome: ¿Cómo saber qué anula una regla CSS?

196

Bueno, esto es bastante sencillo. Si las Herramientas para desarrolladores de Chrome me muestran que se anula un estilo, ¿cómo ver qué regla CSS lo anula?

Quiero saber si hay algo como "Muéstrame qué anula esto" .

OBS: Por favor, no me señales a Firebug.

Ramon K.
fuente
2
Las Herramientas para desarrolladores de Chrome también le muestran la regla primordial
Zoltan Toth el

Respuestas:

283

Use el panel Estilo calculado 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

josh3736
fuente
Para mí, la pestaña calculada estaba abierta por defecto y, por lo tanto, no figuraba como una pestaña, debería haber tenido un encabezado 'Calculada', de lo contrario, podría estar buscando mucho tiempo.
MrFox
1
La técnica ha cambiado un poco a medida que Chrome ha avanzado. En lugar de 'Expandir la propiedad de interés', haga clic en el cristal espía al lado de la propiedad y mostrará qué estilo ganó en la pestaña Estilos.
intotecho
3
@intotecho: Chrome 47 ha restaurado el expando en la pestaña Computado desde que el cambio de lupa apestaba. crbug.com/496263
josh3736
¿Qué pasa si TODOS ellos son cancelados? Probablemente debido a un guión? ¿Cómo saber quién lo hizo?
darkgaze
Todavía está allí como la pestaña "Computado" en el panel Elementos.
josh3736
7

Simplemente puede mirar los que tienen el mismo nombre que no están tachados, recuerde que el listado es importante.

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

user1902091
fuente
2

crtrl + shift + c e inspeccionar el elemento. Luego encuentre el estilo sin una línea que lo atraviese, en el cuadro en la esquina inferior derecha.

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

Peter Rasmussen
fuente
44
No es el caso cuando un estilo se marca como! Importante
JCorriveau