¿Cuál es el orden de precedencia para CSS??
La propiedad que tiene la mayor precedencia se ejecuta antes de la que tiene menor precedencia. Entonces, hay una lista en la que las propiedades CSS se clasifican sobre la base de su precedencia.
Propiedades CSS clasificadas de la precedencia más alta a menor
La precedencia de los elementos CSS de rango superior a menor en orden es la siguiente:
- El !propiedad importante
- Propiedad CSS establecida directamente en el elemento
- Selectores combinados
- Selector de identificación
- Selector de clases
- Selector de atributos
- Selector de elementos
- *
- Estilos heredados
Una breve descripción de cada propiedad
Discutamos estas propiedades y elementos de CSS en detalle en el orden de su precedencia.
El !regla importante
Hay un "!importante"Regla en CSS de que si existe se ejecuta antes de todas las demás propiedades CSS. Declara una propiedad específica como la de la mayor precedencia o instruye al compilador que priorice una determinada propiedad al ejecutar el código. La propiedad que contiene la "!importante"La regla tendrá la mayor precedencia entre todas las otras reglas.
La propiedad que tiene el "!importante"La regla domina sobre las otras propiedades. De hecho, el "!importante”La regla anula la importancia de las otras propiedades.
Escribamos un fragmento de código para comprender el impacto de esto "!importante"Regla en un documento. Aquí hay un fragmento de código HTML que inserta tres oraciones simples en la salida:
Esta es la línea 1
Esta es la línea 2
Esta es la línea 3
Agregamos tres propiedades de estilo CSS para establecer diferentes colores de fondo para cada uno:
.MyClass Background-Color: Red;#myid Background-Color: Green;
P Color de fondo: amarillo !importante;
Parece que el fragmento de código establecerá los tres colores de fondo diferentes para cada uno, pero el "!importante"Regla insertada para la propiedad que establece el color amarillo de fondo domina sobre todas las otras propiedades y la interfaz de salida será la siguiente:
Sin embargo, a veces el "!importante"La propiedad no funciona correctamente debido a múltiples"!importante"Reglas para el mismo tipo de propiedad.
Las propiedades de CSS se ejecutan sobre la base de su precedencia. Después de la "!importante"Regla, todas las propiedades se ejecutan de acuerdo con su precedencia declarada.
Propiedad CSS establecida directamente en el elemento
Cuando hay una propiedad CSS que se establece directamente en un elemento en el elemento de estilo CSS, tendrá la mayor precedencia en comparación con todas las demás propiedades.
Selectores combinados
Estos tienen menos especificidad e importancia que los selectores de elementos directos pero una mayor especificidad que otras propiedades I.selector de identificación, selector de clases y selector de atributos.
Selector de identificación
Tiene una mayor especificidad que los selectores de clase y atributos y selectores más bajos que los combinados.
Selector de clases
Tiene una precedencia menor que el selector de ID y una precedencia más alta que otras propiedades como el atributo y el selector de elementos.
Selector de atributos
Un atributo tiene una precedencia más alta que la del selector de elementos y la precedencia más baja que la del selector de clases.
Selector de elementos
Los selectores de elementos tienen una precedencia menor que los selectores de atributo, clase e ID.
El todo selector ( *)
Tiene la precedencia más baja entre todos los selectores en el elemento de estilo CSS.
Estilos heredados
Dado que los estilos heredados se refieren al padre y no al elemento dirigido exacto en sí, tiene la precedencia más baja en la lista de todas las propiedades de estilo en CSS.
Se explica anteriormente la lista del orden de precedencia de los elementos de estilo CSS.
Conclusión
Como todos los demás lenguajes de codificación, CSS también tiene un orden de precedencia según el cual se realizan las operaciones. Al agregar propiedades CSS en cualquier documento, el navegador debe borrar el conflicto de qué propiedad debe ejecutarse antes que la otra y qué propiedad anula por completo las otras propiedades. Entonces, el navegador tiene que ejecutar el código de acuerdo con el orden de precedencia de CSS.