Cuando se aplican reglas en conflicto entre sí a un elemento determinado, se vuelve bastante complicado determinar qué regla se aplicará realmente.
El orden en que se sobrescriben los atributos está determinado por el lugar en el que aparecen en el CSS, no por el orden en que se definen las clases en el atributo de clase, es decir, el estilo que se define al final de la clase CSS será el que se utilizará. aplicado.
Así, si dos declaraciones tienen el mismo peso, origen y especificidad, gana la última especificada.
Ejemplo 1: este ejemplo muestra cuatro etiquetas con clases únicas. Cuando vemos que las etiquetas tienen el orden ‘basic extra’ o ‘extra basic’ , ambas siguen el estilo como .basic colocado al final del orden de estilo.
<html>
<head>
<style type="text/css">
.extra {
color: #00529B;
font-size:50px;
background-color: pink;
}
.basic {
color: #00529B;
font-size:30px;
background-color: #90ee90; /*light green*/
}
</style>
</head>
<body>
<label class="basic"/>Geeks</label>
<label class="extra"/>For</label>
<label class="basic extra"/>Geeks</label>
<br/>
<br/>
<label class="extra basic"/>Geeks For Geeks</label>
</body>
</html>
Producción:
Ejemplo:
este ejemplo muestra cuatro etiquetas con clases únicas, igual que arriba, pero hemos invertido el orden en el que hemos definido los estilos. Cuando vemos que las etiquetas tienen el orden ‘basic extra’ o ‘extra basic’ , ambas siguen el estilo como .extra colocado al final del orden de estilo.
<html>
<head>
<style type="text/css">
.basic {
color: #00529B;
font-size:30px;
background-color: #90ee90; /*light green*/
}
.extra {
color: #00529B;
font-size:50px;
background-color: pink;
}
</style>
</head>
<body>
<label class="basic"/>Geeks</label>
<label class="extra"/>For</label>
<label class="basic extra"/>Geeks</label>
<br/>
<br/>
<label class="extra basic"/>Geeks For Geeks</label>
</body>
</html>
Producción :
Publicación traducida automáticamente
Artículo escrito por akansha003 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA