Inspect the working example
The base layer gives #note a red color. The later components layer gives .note green. These are normal author declarations without !important.
| Case | Input or inspection | Result and meaning |
|---|---|---|
| Base | #note red | Earlier layer |
| Components | .note green | Later layer wins |
| Computed result | Read color | rgb(0,80,40) |
Follow the browser mechanism
Layer ordering is considered before selector specificity for these normal declarations. This does not mean layers always beat unlayered styles. Important declarations reverse layer priority and are outside this fixed example.
A normal unlayered rule outranks these layers
The alternative adds an unlayered .note rule.
<style>body{margin:8px}</style>
<style>@layer base,components;@layer base{#note{color:rgb(120,0,0)}}@layer components{.note{color:rgb(0,80,40)}}.note{color:rgb(80,0,100)}</style><p id="note" class="note">Workshop note</p>The normal unlayered declaration wins and computes to rgb(80,0,100).
Try the repair
Does the green result prove that a class selector has greater specificity than an ID?
Show the worked answer
No. Layer order settled this comparison before specificity was considered.
- Record origin, importance and layer before comparing selectors.
- Inspect computed color and the full rule context.