Spesifisiteitsreëls in CSS

In die vorige voorbeeld was albei selektore dieselfde en het dieselfde prioriteit gehad. Dit beteken dat die eienskap wat laer geskryf is, gewen het.

Daar is ook situasies waar verskeie selektore by 'n bladsye-element pas. In hierdie geval, by konflik van eienskappe, sal die meer spesifieke, dit wil sê die meer akkurate selektor, wen. Kom ons kyk na die spesifisiteitsreëls.

Reël een

'n Klas wen altyd teen 'n etiketselektor:

<p class="text">text</p>

p {
	color: red;
}
.text {
	color: green; /* hierdie kleur sal toegepas word */
}

Reël twee

'n Identifikasie wen altyd teen 'n klas:

<p id="elem" class="text">text</p>

.text {
	color: red;
}
#elem {
	color: green; /* hierdie kleur sal toegepas word */
}

Reël drie

Met gelyke voorwaardes wen die selektor met die meeste dele. Byvoorbeeld, as ons twee etiketselektore het, sal die een wen met die meeste etikette:

<div>
	<p>text</p>
</div>

p {
	color: red;
}
div p {
	color: green; /* hierdie kleur sal toegepas word */
}

As daar twee klasselelektore is, sal die een wen waar meer klasse gespesifiseer is (indien daar etikettelelektore is, beïnvloed hulle nie):

<div class="block">
	<p class="text">text</p>
</div>

.text {
	color: red;
}
.block .text {
	color: green; /* hierdie kleur sal toegepas word */
}