freeCodeCamp

3.3 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
bad87fee1348bd8aedf06756	Override Class Declarations by Styling ID Attributes	0		Substituir Declarações de Classe por Atributos de ID de Estilo

Description

Acabamos de provar que os navegadores lêem CSS de cima para baixo. Isso significa que, no caso de um conflito, o navegador usará a última declaração CSS. Mas ainda não terminamos. Existem outras maneiras de substituir o CSS. Você se lembra de atributos id? Vamos substituir suas classes de blue-text pink-text blue-text e tornar seu elemento h1 laranja, dando um id ao elemento h1 e, em seguida, estilizando esse id.

Instructions

Dê ao seu elemento h1 o atributo id do orange-text . Lembre-se, os estilos de id são assim: <h1 id="orange-text"> Deixe as classes de pink-text blue-text pink-text em seu elemento h1 . Crie uma declaração CSS para o seu ID de orange-text em seu elemento de style . Aqui está um exemplo do que isso parece:

# brown-text {
cor marrom;
}

Nota: Não importa se você declara este CSS acima ou abaixo da classe pink-text, já que o atributo id sempre terá precedência.

Tests

tests:
  - text: Seu elemento <code>h1</code> deve ter a classe <code>pink-text</code> .
    testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
  - text: Seu elemento <code>h1</code> deve ter a classe <code>blue-text</code> .
    testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
  - text: Dê ao seu elemento <code>h1</code> o id do <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: Deve haver apenas um elemento <code>h1</code> .
    testString: 'assert(($("h1").length === 1), "There should be only one <code>h1</code> element.");'
  - text: Crie uma declaração CSS para o seu 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: Não dê ao seu <code>h1</code> nenhum atributo de <code>style</code> .
    testString: 'assert(!code.match(/<h1.*style.*>/gi), "Do not give your <code>h1</code> any <code>style</code> attributes.");'
  - text: Seu elemento <code>h1</code> deve ser laranja.
    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