Muchos desarrolladores conocen el concepto de sobrescritura de clases en CSS. Bueno, es cierto, pero cuando se trata de cómo se sobrescriben estas clases, la mayoría de ellas se confunden. Las clases se encuentran entre los activos importantes del desarrollo front-end. Por lo tanto, es muy importante tener claridad sobre ellos. Los atributos de estilo que deben incluirse en los elementos HTML se definen dentro de las clases y luego se pueden invocar utilizando el atributo «estilo» dentro de la etiqueta. El atributo de estilo admite tantos valores (clases) que proporcione, ¡y la confusión comienza desde aquí!
Ya sea que hables de definir clases en un mismo archivo dentro del bloque o invocar clases de los diferentes archivos CSS. Esta regla se mantiene constante.
“El orden de las clases en las que trabajarían no depende del orden en el que están escritos en el atributo de clase. Más bien, se decide por el orden en que aparecen en el bloque o el archivo .css”
En caso de que varias clases consten de atributos similares y se utilicen en el mismo elemento HTML. Luego, la clase modificada, la última se usaría para diseñar el elemento.
El siguiente ejemplo ilustra el concepto de orden de clases:
Ejemplo
HTML
<!DOCTYPE html>
<html>
<head>
<title>Specify the order of classes in CSS</title>
<style type="text/css">
h1 {
color: green;
}
.container {
width: 600px;
padding: 5px;
border: 2px solid black;
}
.box1 {
width: 300px;
height: 50px;
background-color: purple;
}
.box2 {
width: 595px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
<b>A Computer Science Portal for Geeks</b>
<br>
<br>
<div class="container">
<div>
<input type="text" class="box1" value=
"How is it going everyone, this is box number 1">
</div>
<div>
<input type="text" class="box2" value=
"This is box number 2">
</div>
<div>
<input type="text" class="box1 box2" value=
"Here we are trying to combine box1 and box2, let us name it box3">
</div>
<div>
<input type="text" class="box2 box1" value=
"This is similar to box number 3, only difference is
precedence of classes, let us name it box4">
</div>
</div>
</body>
</html>
Producción:
- Ahora, si nota que div1 y div2 representan las clases box1 y box2 respectivamente, obtendrá el resultado esperado.
- Sin embargo, en el caso de div3 con el atributo de estilo como box1 box2 , invoca varias clases de CSS. Ahora, uno podría confundir fácilmente que, dado que box1 se escribe primero en el atributo de estilo de div3 y, por lo tanto, se llama prior y luego, tan pronto como se invoca box2 , debe sobrescribir box1 . Pero ese no es el caso. Si observa detenidamente el archivo styling.css, box1{} se define antes que box2{} y es por eso que box1 se sobrescribe con box2 . En el caso de div4 , cuando llamamos a box2 antes de box1. Este mismo mecanismo funciona y proporciona el estilo de box2 en el bloque div4 .
Nota: Recuerda que el CSS en línea siempre tiene más prioridad que el CSS externo e interno. Por lo tanto, si usa un estilo en línea en los elementos HTML, las propiedades definidas en el estilo en línea sobrescribirán las clases predefinidas. Puede ignorar todas estas cosas si conoce la palabra clave !important .
Publicación traducida automáticamente
Artículo escrito por dubey_manas28 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA