Basis van webtechnologie

<style>
  #main p    { color: red; }
  .content p { color: green; }
  p.note     { color: blue; }
</style>
<div id="main" class="content">
  <p class="note">Hello</p>
</div>

Neem aan dat er geen andere stijldeclaraties zijn. Welke kleur heeft de tekst „Hello” in de bovenstaande HTML?

ARood (red)
BGroen (green)
CBlauw (blue)

Antwoord en toelichting tonen

Antwoord: A. Rood (red)

Als meerdere regels op hetzelfde element van toepassing zijn, wint de regel waarvan de selector de hoogste specificiteit heeft. Specificiteit wordt vergeleken als het tupel (aantal ID's, aantal klassen, attributen en pseudoklassen, aantal elementen): #main p is (1, 0, 1), terwijl .content p en p.note allebei (0, 1, 1) zijn, dus het rood van #main p, dat een ID bevat, wordt gebruikt. Bij regels met gelijke specificiteit wint de regel die later is geschreven. Een declaratie die rechtstreeks in het style-attribuut staat, of een die met !important is gemarkeerd, gaat hier nog boven.

Dit onderwerp oefenen Naar de onderwerppagina

Neem aan dat er geen andere stijldeclaraties zijn. Welke kleur heeft de tekst „Hello” in de bovenstaande HTML?

Meer vragen over Basis van webtechnologie