Spesifisitet for etterkommervelgere i CSS
I alle foregående leksjoner måtte alle velgere fange selve elementet. Det kan være slik, at en velger fanger elementet, og en annen velger fanger forelderen til dette elementet.
Du vet allerede at hvis en forelder får tildelt, for eksempel, en farge, vil denne farge bli arvet av etterkommeren. Men hvis etterkommeren også er tildelt en farge, vil velgeren for etterkommeren ha høyere spesifisitet enn velgeren til forelderen.
Dette betyr at en tagg-velger for etterkommeren vinner over forelderens klasse:
<div class="block">
<p>text</p>
</div>
.block {
color: red;
}
p {
color: green; /* denne fargen vil bli brukt */
}
:
En tagg-velger for etterkommeren vinner også over forelderens identifikator:
<div id="block">
<p class="text">text</p>
</div>
#block {
color: red;
}
.text {
color: green; /* denne fargen vil bli brukt */
}
: