!Regla importante en CSS explicada
Las propiedades de CSS se aplican en un orden que se define utilizando el concepto de especificidad en CSS. Sin embargo, a veces es posible que deba dar importancia al valor de una propiedad de CSS sobre los otros valores de la misma propiedad. Para esto, el !La palabra clave importante se usa con una propiedad CSS para que sea más prominente que otras propiedades. Este artículo demuestra el uso del !regla importante en CSS.
Cómo !La regla importante funciona en CSS
Para comprender el trabajo, debe comprender la sintaxis seguida de !regla importante.
Selector Propiedad: valor !importante;El selector se refiere al selector de CSS que se utiliza mientras el propiedad se refiere a la propiedad CSS que se aplica con algunos valor. La colocación del !La palabra clave importante también es importante, y debe estar al final del valor de la propiedad como se muestra en la sintaxis.
Cómo utilizar !regla importante en CSS
Como el !La regla importante no sigue la especificidad; Por lo tanto, no importa dónde !Se aplica una regla importante, solo se encuentra al más alto nivel de especificidad. Tengamos algunos ejemplos para obtener una imagen más clara de este fenómeno.
Ejemplo 1: Uso de CSS externo, interno y en línea
Por lo general, el CSS en línea tiene la más alta prioridad seguida de CSS interno y externo. El siguiente código usa el !regla importante en una hoja de estilo externo para mostrar su comportamiento primordial.
Html
Bienvenido a Linuxhint!
En el código anterior, un
El elemento se usa con un estilo en línea que tiene la intención de cambiar el color de fondo.
CSS externo
H3Color de fondo: Lightgreen !importante;
relleno: 5px;
borde: delgado sólido;
Ancho: 50%;
El código anterior se refiere a la hoja de estilo externa que estaría vinculada al documento HTML. Se observa que la propiedad de color de fondo tiene una !importante gobernar con él.
CSS interno
H3 Color de fondo: SkyBlue;El código CSS anterior se ha utilizado como CSS interno; Este CSS interno también trata de cambiar el color de fondo del
elemento.
Producción
Aunque el en línea tiene una prioridad más alta que la interna y externa. Sin embargo, hemos usado el !Palabra clave importante con la propiedad de color de fondo en CSS externo. Por lo tanto, el color de fondo se obtendrá del archivo CSS externo como se puede ver en la salida anterior.
Ejemplo 2: Uso de varios selectores CSS
Aquí, se utilizan los selectores CSS como la clase y la ID de un elemento. El !Se aplica una regla importante dentro de la clase de un elemento.
Html
Bienvenido a Linuxhint!
En el código anterior se crea un párrafo con id = "para" y class = "cl".
CSS
El ".CL "Selector y el"#paraca"Los selectores de CSS intentan establecer el color de fondo del
Producción
Aunque el selector de identificación tiene una prioridad más alta que el selector de clases, el !importante La regla anulará la propiedad de color de fondo utilizada en el id = "paraca"Selector.
Conclusión
El !La regla importante es bastante útil en varios escenarios complejos donde se utilizan múltiples hojas de estilo externo e interno y solo desea agregar otra propiedad CSS con la más alta prioridad. Manteniendo la importancia del !Regla importante en mente, esta publicación proporciona una guía detallada sobre el trabajo y el uso del !regla importante en CSS. El uso del !La regla importante se ilustra ejercitándola en varios selectores de CSS y observando que anula la propiedad CSS relevante utilizada por otros selectores CSS.