Beginnersfout in die Afstammelingselektor
Kyk na die volgende selekteerder:
p.eee {
color: red;
}
Jy moet reeds weet dat so 'n selekteerder
paragrawe met die klas eee sal kies. Byvoorbeeld, hierdie:
<p class="eee">
lorem ipsum
</p>
<p class="eee">
lorem ipsum
</p>
Kyk nou na hierdie selekteerder:
p .eee {
color: green;
}
Hierdie selekteerder verskil van die vorige deurdat
daar 'n spasie tussen die tagnaam en die klasnaam
is. Hierdie spasie verteenwoordig 'n
afstammelingselekteerder. Dit beteken in hierdie geval
kies ons alle elemente met die klas eee,
wat binne paragrawe geleë is. Byvoorbeeld, hierdie
selekteerder sal die volgende spanne kies:
<p>
lorem <span class="eee">ipsum</span>
</p>
<p>
lorem <span class="eee">ipsum</span>
</p>
Resultaat van die kode-uitvoering:
Dus, weer eens: p.eee - so 'n selekteerder kies paragrawe met die klas
eee. Maar as ek dit so maak: p .eee, dan kies ek
alle elemente met die klas eee, geleë binne paragrawe.
Voel hierdie verskil.
Vertel wat die selekteerder in die onderstaande kode kies. Skryf dan die HTML-kode wat by hierdie selekteerder pas. Hier is die kode met die selekteerder:
p.bbb {
color: red;
}
Vertel wat die selekteerder in die onderstaande kode kies. Skryf dan die HTML-kode wat by hierdie selekteerder pas. Hier is die kode met die selekteerder:
p .bbb {
color: red;
}
Vertel wat die selekteerder in die onderstaande kode kies. Skryf dan die HTML-kode wat by hierdie selekteerder pas. Hier is die kode met die selekteerder:
.eee p.bbb {
color: red;
}
Vertel wat die selekteerder in die onderstaande kode kies. Skryf dan die HTML-kode wat by hierdie selekteerder pas. Hier is die kode met die selekteerder:
.eee p .bbb {
color: red;
}