Prioritet för avkomlingselektorer i CSS
I alla tidigare lektioner har alla selektorer behövt fånga själva elementet. Det kan hända att en selektor fångar elementet, medan en annan selektor fångar föräldern till detta element.
Du vet redan att om en förälder tilldelas, till exempel, en färg, så kommer denna färg att ärvas av avkomlingen. Men om avkomlingen också tilldelas en färg, kommer selektorn för avkomlingen att ha högre prioritet än selektorn för föräldern.
Detta betyder att taggselektorn för avkomlingen vinner över förälderns klass:
<div class="block">
<p>text</p>
</div>
.block {
color: red;
}
p {
color: green; /* denna färg appliceras */
}
:
Taggselektorn för avkomlingen vinner även över förälderns identifierare:
<div id="block">
<p class="text">text</p>
</div>
#block {
color: red;
}
.text {
color: green; /* denna färg appliceras */
}
:
