html - google - ¿Cómo determinas qué es lo que anula tu estilo?
meta tags seo (7)
Esta pregunta ya tiene una respuesta aquí:
Cuando juguetea con estilos de código de muestra, encuentro que el código tiene estilos que anularán mi estilo porque usarán una referencia de prioridad más alta (por ejemplo: .div .class > .class ).
Me encontraré con situaciones como esta:
¿Cómo puedo saber qué estilo está anulando mi estilo? Quiero evitar usar !important porque eventualmente terminaré en la misma situación.
EDIT: No estoy preguntando por qué esto está sucediendo. Ya sé de prioridad, por lo que mencioné que .div .class tiene una prioridad más alta que .class . Quiero rastrear lo que realmente se está utilizando en lugar de simplemente decirme que está "inactivo". Además, ya sé sobre Chrome Developer porque la captura de pantalla es de Chrome Developer.
EDITAR: se solucionó el problema real, pero la pregunta sigue siendo ... ¿hay una manera más fácil de ver qué causa la anulación?
Solución: Solo necesitaba el selector en el orden correcto. .box primero, luego .box-blue .
Aquí hay una explicación simple.
Ciertos selectores anularán los existentes, por ejemplo
p {
color: green;
}
.Paragraphs {
color: yellow;
}
#paragraph2 {
color: red;
}
<p>Lorem Ipsum</p>
<p class="Paragraphs">Lorem Ipsum</p>
<p id="paragraph2" class="Paragraphs">Lorem Ipsum</p>
<p class="Paragraphs" style="color: blue">Lorem Ipsum</p>
Como se muestra, el selector p se invalida con el selector .Paragraphs y el selector #agraph2 reemplaza .Paragraphs y el atributo de estilo se reemplaza con #agraph2 y, por supuesto, cualquier selector con! Important reemplazará casi todo.
En devtools, en el inspector de estilo, elija Computado. Encuentre la propiedad que le interesa y haga clic en ella. Verá una lista de todas las reglas que se aplican a esta propiedad, con la activa en la parte superior, y cada una con una referencia de archivo / línea donde se define.
Considere el siguiente HTML:
<style>
#foo { color: red; }
p { color: blue; }
</style>
<p id="foo">What color am I?</p>
Verías lo siguiente:
En las Herramientas para desarrolladores de Firefox, puede encontrarlo en un clic cerca de la propiedad anulada en el Inspector:
Declaraciones anuladas
A partir de Firefox 43, las declaraciones anuladas tienen una lupa junto a ellas. Haga clic en la lupa para filtrar la vista de reglas para mostrar solo las reglas que se aplican al nodo actual que intenta establecer la misma propiedad: es decir, la cascada completa para la propiedad dada.
Esto hace que sea fácil ver qué regla está anulando la declaración:
Así es como se ve. Mira el video para verlo en acción.
En su imagen puede ver el .box-blue del border-color: #bce8f1 la clase .box-blue border-color: #bce8f1 regla ha sido anulada por el border: 1px solid transparent (no puedo ver el selector). Puede ver los archivos CSS de las reglas CSS anuladas del lado derecho de los selectores en la herramienta Inspeccionar.
A veces las reglas de CSS pueden ser cambiadas por el JavaScript. Puede ser mostrado como CSS en línea.
Hay extensiones de navegador que ayudan con esto. Yo uso "Desarrollador Web" en Firefox, pero hay muchos otros.
Chrome también tiene Ver> Desarrollador> Herramientas de desarrollo.
Si pasa el mouse sobre un elemento en la pantalla, le dirán su ruta (html> body> div.blah> span.foo) y qué estilos de CSS se aplicaron a ese elemento.
No hay una forma definitiva de inferir qué selector anula un estilo dado (que yo sepa), pero la interfaz de las herramientas de desarrollo es lo suficientemente intuitiva como para que normalmente resulte sencillo resolverlo.
Su estilo de overriden se muestra con un golpe a través. Para saber qué selector lo anula, busque una versión sin estructura de la misma regla.
A veces esto es tan fácil como ver:
color: red;
Y tener que buscar un selector con:
color: blue;
Las herramientas de desarrollo de Chrome en realidad clasifican los selectores por prioridad, por lo que si encuentra un estilo anulado, se le puede garantizar que la anulación estará en el mismo selector o en uno de los que están arriba.
Pero tendrá que recordar que algunas reglas están compuestas por otras y no siempre encontrará una regla correspondiente con el mismo nombre . En su ejemplo, su regla de border-color está siendo anulada por la regla de border del selector anterior. La regla de borde es abreviada para especificar border-width border-style border-color .
Puede desplazarse hacia arriba o hacia abajo en la pestaña de estilos en las herramientas de desarrollo que usa en el ejemplo anterior para encontrar el selector que .box-blue . Una vez que haya encontrado el border-color habilitado en otro estilo, puede determinar qué selector lo anulará.
Cuando diseñó .box-blue con border-color: red por ejemplo, se podría anular con otro estilo con la misma propiedad, posiblemente border . Debido a que border: 1px solid blue podría ser una forma abreviada de border-width: 1px + border-style: solid + border-color: blue , entonces podría ser la posibilidad de anular el estilo anterior.