freeCodeCamp

3.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd8aedf06756	Override Class Declarations by Styling ID Attributes	0		Anular declaraciones de clase por atributos de ID de estilo

Description

Acabamos de demostrar que los navegadores leen CSS de arriba a abajo. Eso significa que, en caso de conflicto, el navegador utilizará la declaración de CSS que haya sido la última. Pero aún no hemos terminado. Hay otras formas en que puedes anular CSS. ¿Recuerdas los atributos de identificación? Anulemos sus clases de blue-text pink-text blue-text , y hagamos que su elemento h1 naranja, asignando una identificación al elemento h1 y luego diseñando ese tipo de identificación.

Instructions

Dale a tu elemento h1 el atributo id del orange-text . Recuerde, los estilos de identificación tienen este aspecto: <h1 id="orange-text"> Deje las clases de pink-text blue-text y pink-text en su elemento h1 . Cree una declaración CSS para su ID de orange-text en su elemento de style . Aquí hay un ejemplo de cómo se ve esto:

# texto marrón {
color marrón;
}

Nota: No importa si declara este CSS por encima o por debajo de la clase de texto rosado, ya que el atributo id siempre tendrá prioridad.

Tests

tests:
  - text: Su elemento <code>h1</code> debe tener la clase <code>pink-text</code> .
    testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
  - text: Su elemento <code>h1</code> debe tener la clase <code>blue-text</code> .
    testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
  - text: Dale a tu elemento <code>h1</code> el id del <code>orange-text</code> .
    testString: 'assert($("h1").attr("id") === "orange-text", "Give your <code>h1</code> element the id of <code>orange-text</code>.");'
  - text: Debería haber un solo elemento <code>h1</code> .
    testString: 'assert(($("h1").length === 1), "There should be only one <code>h1</code> element.");'
  - text: Crea una declaración CSS para tu ID de <code>orange-text</code>
    testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your <code>orange-text</code> id");'
  - text: No le des a su <code>h1</code> ningún <code>style</code> atributos.
    testString: 'assert(!code.match(/<h1.*style.*>/gi), "Do not give your <code>h1</code> any <code>style</code> attributes.");'
  - text: Su elemento <code>h1</code> debe ser naranja.
    testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your <code>h1</code> element should be orange.");'

Challenge Seed

<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>

Solution

// solution required

3.3 KiB Raw Blame History