Presta atención porque en esta noticia hallarás la solución que buscas.Esta sección ha sido analizado por nuestros expertos para garantizar la calidad y exactitud de nuestro post.
Solución:
Hay varias reglas (aplicadas en este orden):
- css en línea (estilo html attribute ) anula las reglas css en la etiqueta de estilo y el archivo css
- un selector más específico tiene prioridad sobre uno menos específico
- las reglas que aparecen más adelante en el código anulan las reglas anteriores si ambas tienen la misma especificidad.
- Una regla css con
!importantsiempre tiene prioridad.
En su caso, es la regla 3 la que se aplica.
Especificidad para selectores individuales de mayor a menor:
- identificadores (ejemplo:
#mainselecciona)- clases (ej.:
.myclass), attribute selectores (ej.:[href=^https:]) y pseudo-clases (ej.::hover)- elementos (ej.:
div) y pseudo-elementos (ej.:::before)Para comparar la especificidad de dos selectores combinados, compare el número de apariciones de selectores únicos de cada uno de los grupos de especificidad anteriores.
Ejemplo: comparar
#nav ul li a:hoverpara#nav ul li.active a::after- cuente el número de selectores de id: hay uno para cada uno (
#nav) - cuente el número de selectores de clase: hay uno para cada uno (
:hovery.active) - cuente el número de selectores de elementos: hay 3 (
ul li a) para el primero y 4 para el segundo (ul li a ::after), por lo que el segundo selector combinado es más específico.
Un buen artículo sobre la especificidad del selector css.
Aquí hay una compilación del orden de estilo CSS en un diagrama, en el que las reglas CSS tienen mayor prioridad y prevalecen sobre el resto:
Descargo de responsabilidad: Mi equipo y yo elaboramos esta pieza junto con una publicación de blog (https://vecta.io/blog/definitive-guide-to-css-styling-order) que creo que será útil para todos los desarrolladores front-end .
Lo que estamos viendo aquí se llama especificidad como dice Mozilla:
La especificidad es el medio por el cual los navegadores deciden qué valores de propiedad CSS son los más relevantes para un elemento y, por lo tanto, se aplicarán. La especificidad se basa en las reglas de coincidencia que se componen de diferentes tipos de selectores CSS.
La especificidad es un peso que se aplica a una declaración CSS determinada, determinada por el número de cada tipo de selector en el selector coincidente. Cuando varias declaraciones tienen la misma especificidad, la última declaración encontrada en el CSS se aplica al elemento. La especificidad solo se aplica cuando el mismo elemento es objeto de varias declaraciones. Según las reglas de CSS, los elementos dirigidos directamente siempre tendrán prioridad sobre las reglas que un elemento hereda de su ancestro.
me gusta el 0-0-0 explicación en https://specifishity.com:
Bastante descriptivo el cuadro de la
!important¡directiva! Pero a veces es la única forma de anular el en líneastyleattribute. Así que es una mejor práctica tratar de evitar ambos.Recuerda que tienes la capacidad de añadir una estimación certera si tropezaste tu duda a tiempo.
¡Haz clic para puntuar esta entrada!(Votos: 0 Promedio: 0)Utiliza Nuestro Buscador
- clases (ej.:
