2.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd9aedf06756	Sobreescribe declaraciones de clase con inline styles (estilos en línea)	0	https://scrimba.com/c/cGJDRha	18252	override-class-declarations-with-inline-styles

--description--

Hemos demostrado que las declaraciones de id tienen prioridad por sobre las declaraciones de clase, independientemente de dónde hayan sido declaradas en el código CSS del elemento style.

Pero existen otras formas de sobreescribir código CSS. ¿Recuerdas los "inline styles" (estilos en línea)?

--instructions--

Usa un inline style para hacer que nuestro elemento h1 sea de color blanco. Recuerda que los inline styles se ven así:

<h1 style="color: green;">

Deja las clases blue-text y pink-text en tu elemento h1.

--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'));

Tu elemento h1 debe incluir el id orange-text.

assert($('h1').attr('id') === 'orange-text');

Tu elemento h1 debe tener un inline style.

assert(document.querySelector('h1[style]'));

Tu elemento h1 debe ser de color blanco ("white").

assert($('h1').css('color') === 'rgb(255, 255, 255)');

--seed--

--seed-contents--

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>

--solutions--

<style>
  body {
    background-color: black;
    font-family: monospace;
    color: green;
  }
  #orange-text {
    color: orange;
  }
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

2.0 KiB Raw Blame History