Hola a todos, hoy os voy a explicar como se calcula la prioridad en los estilos de CSS.
¿Nunca te has preguntado como CSS sabe que estilo debe mostrar cuando tenemos tantos?
Esto no se hace de forma casual, cuanto más especifico sea, más prioridad tendrá y machacará a otros estilos.
La prioridad se divide en 3 parte diferentes:
- Nivel 1: Selectores de id.
- Nivel 2: Selectores de clase, selectores de atributos y pseudo-clases.
- Nivel 3: Selectores de tipo y pseudoelementos.
Un ejemplo seria este:
Os dejo aquí una herramienta muy útil para calcular el peso de nuestras reglas de una forma más gráfica. Recuerda de pulsar en ordenar.
También podemos «romper» esa prioridad con la palabra !important a una propiedad en concreto, esto hace que automáticamente tenga mas prioridad esa prioridad en concreto.
Solo es recomendable como ultima opción para mostrar nuestros estilos propios, muy común para bibliotecas externas como bootstrap.
También tenemos los enlaces internos, que son los que más prioridad tienen. Son aquellos estilos que estan dentro de un style en HTML.
Veamos un ejemplo de todo lo explicado.
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
Deja una respuesta