2.8 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
bad87fee1348bd8aedf06756	Sovrascrivere le dichiarazioni di classe stilizzando gli attributi ID	0	https://scrimba.com/c/cRkpDhB	18251	override-class-declarations-by-styling-id-attributes

--description--

Abbiamo appena dimostrato che i browser leggono CSS dall'alto al basso, in ordine di dichiarazione. Ciò significa che, in caso di conflitto, il browser utilizzerà la dichiarazione CSS che è arrivata per ultima. Nota che se avessimo messo blue-text prima di pink-text nelle classi dell'elemento h1, il browser rispetterebbe ancora l'ordine di dichiarazione e non l'ordine con cui vengono usate!

Però non abbiamo ancora finito. Ci sono altri modi in cui puoi sovrascrivere il CSS. Ti ricordi gli attributi id?

Sovrascrivi le tue classi pink-text e blue-text, e rendi il tuo elemento h1 arancione, dando all'elemento h1 un id e poi stilizzando questo id.

--instructions--

Dai al tuo elemento h1 l'attributo id di orange-text. Ricorda, gli id di stile appaiono così:

<h1 id="orange-text">

Lascia le classi blue-text e pink-text sul tuo elemento h1.

Crea una dichiarazione CSS per il tuo id orange-text nel tuo elementostyle. Ecco un esempio di come questo appare:

#brown-text {
  color: brown;
}

Nota: Non importa se dichiari questo CSS sopra o sotto la classe pink-text, dato che l'attributo id avrà sempre la priorità.

--hints--

Il tuo elemento h1 dovrebbe avere la classe pink-text.

assert($('h1').hasClass('pink-text'));

L'elemento h1 dovrebbe avere la classe blue-text.

assert($('h1').hasClass('blue-text'));

Il tuo elemento h1 dovrebbe avere l'id di orange-text.

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

Dovrebbe esserci un solo elemento h1.

assert($('h1').length === 1);

Il tuo id orange-text dovrebbe avere una dichiarazione CSS.

assert(code.match(/#orange-text\s*{/gi));

Il tuo tag h1 non dovrebbe avere alcun attributo style.

assert(!code.match(/<h1.*style.*>/gi));

Il tuo elemento h1 dovrebbe essere arancione.

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

--seed--

--seed-contents--

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

--solutions--

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

2.8 KiB Raw Blame History