2.3 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
bad87fee1348bd9aedf04756 | Sobreescribe estilos en código CSS posterior | 0 | https://scrimba.com/c/cGJDQug | 18253 | override-styles-in-subsequent-css |
--description--
¡Nuestra clase pink-text
sobrescribió la declaración CSS de nuestro elemento body
!
Acabamos de demostrar que nuestras clases sobrescribirán el CSS del elemento body
. Entonces, la siguiente pregunta lógica es: ¿qué podemos hacer para sobrescribir nuestra clase pink-text
?
--instructions--
Crea una clase CSS adicional llamada blue-text
que asigne a un elemento el color azul ("blue"). Asegúrate de que esté debajo de tu declaración de pink-text
.
Aplica la clase blue-text
a tu elemento h1
además de tu clase pink-text
, y veamos cuál de las dos gana.
Para aplicar múltiples atributos de clase a un elemento HTML debes dejar un espacio entre ellos, como se muestra a continuación:
class="class1 class2"
Nota: No importa el orden en que las clases estén enlistadas dentro del elemento HTML.
Sin embargo, lo importante es el orden de las declaraciones de class
clases en la sección <style>
. La segunda declaración siempre tendrá prioridad sobre la primera. Debido a que .blue-text
ha sido declarada en segundo lugar, sobrescribirá los atributos de .pink-text
--hints--
Tu elemento h1
debe incluir la clase pink-text
.
assert($('h1').hasClass('pink-text'));
Tu elemento h1
debe incluir la clase blue-text
.
assert($('h1').hasClass('blue-text'));
Tanto blue-text
como pink-text
deben pertenecer al mismo elemento h1
.
assert($('.pink-text').hasClass('blue-text'));
Tu elemento h1
debe ser de color azul ("blue").
assert($('h1').css('color') === 'rgb(0, 0, 255)');
--seed--
--seed-contents--
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
</style>
<h1 class="pink-text">Hello World!</h1>
--solutions--
<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="pink-text blue-text">Hello World!</h1>