Nybörjarmisstag i avkommarselektorn
Titta på följande selektor:
p.eee {
color: red;
}
Du borde redan veta att en sådan selektor kommer att välja ut
stycken med klassen eee. Till exempel dessa:
<p class="eee">
lorem ipsum
</p>
<p class="eee">
lorem ipsum
</p>
Titta nu på den här selektorn:
p .eee {
color: green;
}
Denna selektor skiljer sig från den föregående genom
att det mellan taggnamnet och klassnamnet
finns ett mellanslag. Detta mellanslag representerar
en avkommarselektor. Det betyder att i det här fallet
väljer vi alla element med klassen eee,
som finns inuti stycken. Till exempel kommer denna
selektor att välja följande spann:
<p>
lorem <span class="eee">ipsum</span>
</p>
<p>
lorem <span class="eee">ipsum</span>
</p>
Resultat av kodkörning:
Så, ännu en gång: p.eee - en sådan selektor väljer stycken med klassen
eee. Men om jag gör så här: p .eee, så väljer jag
alla element med klassen eee, som finns inuti stycken.
Känn efter på denna skillnad.
Berätta vad selektorn väljer ut i koden nedan. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:
p.bbb {
color: red;
}
Berätta vad selektorn väljer ut i koden nedan. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:
p .bbb {
color: red;
}
Berätta vad selektorn väljer ut i koden nedan. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:
.eee p.bbb {
color: red;
}
Berätta vad selektorn väljer ut i koden nedan. Skriv sedan HTML-kod som passar till denna selektor. Här är koden med selektorn:
.eee p .bbb {
color: red;
}