Pradedančiųjų klaida palikuonių selektoriuje

Pažvelkite į šį selektorių:

cssp.eee {
  color: red;
}

Jūs jau turėtumėte žinoti, kad toks selektorius pasirinks paragrafus su klase eee. Pavyzdžiui, šiuos:

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

Dabar pažvelkite į šį selektorių:

cssp .eee {
  color: green;
}

Šis selektorius skiriasi nuo ankstesnio tuo, kad tarp elemento pavadinimo ir klasės pavadinimo yra tarpas. Šis tarpas reiškia palikuonių selektorių. Tai yra, šiuo atveju mes pasirenkame visus elementus su klase eee, esančius paragrafuose. Pavyzdžiui, šis selektorius pasirinks šiuos span elementus:

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

Kodo vykdymo rezultatas:

cssp.bbb {
  color: red;
}

cssp .bbb {
  color: red;
}

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

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