Nybegynnerfeil i avkjøringselektorer

Se på følgende selektor:

cssp.eee {
  color: red;
}

Du bør allerede vite at en slik selektor vil velge avsnitt med klassen eee. For eksempel disse:

html<p class="eee">
  lorem ipsum
</p>
<p class="eee">
  lorem ipsum
</p>

Se nå på denne selektoren:

cssp .eee {
  color: green;
}

Denne selektoren skiller seg fra den forrige ved at det mellom taggnavnet og klassenavnet står et mellomrom. Dette mellomrommet representerer en avkjøringsselektor. Det betyr at i dette tilfellet velger vi alle elementer med klassen eee, som befinner seg innenfor avsnitt. For eksempel vil denne selektoren velge følgende span-elementer:

html<p>
  lorem <span class="eee">ipsum</span>
</p>
<p>
  lorem <span class="eee">ipsum</span>
</p>

Resultat av kjøring:

Så, igjen: p.eee - en slik selektor velger avsnitt med klassen eee. Men hvis jeg gjør slik: p .eee, så velger jeg alle elementer med klassen eee, som befinner seg innenfor avsnitt. Føl denne forskjellen.

Задание 1

Forklar hva selektoren velger i koden nedenfor. Skriv deretter HTML-kode som passer til denne selektoren. Her er koden med selektoren:

cssp.bbb {
  color: red;
}
Задание 2

Forklar hva selektoren velger i koden nedenfor. Skriv deretter HTML-kode som passer til denne selektoren. Her er koden med selektoren:

cssp .bbb {
  color: red;
}
Задание 3

Forklar hva selektoren velger i koden nedenfor. Skriv deretter HTML-kode som passer til denne selektoren. Her er koden med selektoren:

css.eee p.bbb {
  color: red;
}
Задание 4

Forklar hva selektoren velger i koden nedenfor. Skriv deretter HTML-kode som passer til denne selektoren. Her er koden med selektoren:

css.eee p .bbb {
  color: red;
}