@layer-erklæring og rækkefølge
Erklær navngivne kaskadelag, og styr deres prioritetsrækkefølge med @layer-udsagn.
@layer-erklæring og rækkefølge er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad er @layer?
CSS-kaskadelag (@layer) gør det muligt eksplicit at styre prioriteten for CSS-regler i kaskaden – uafhængigt af specificitet. Lag med lavere prioritet taber, selv når de har selektorer med højere specificitet.
Hvorfor er @layer vigtigt
Uden lag konkurrerer alle CSS-regler ved hjælp af specificitet og kilderekkefølge. Det fører til specificitetskampe, når reset-, komponent- og utility-stilarter alle kæmper om prioriteten. Lag giver hver gruppe en fast og forudsigelig prioritet.
Deklaration af lag
Deklarer lag på forhånd i én enkelt erklæring. Deklarationsrækkefølgen bestemmer prioriteten – senere lag vinder over tidligere lag.
<p>This scene only declares layer order — see the CSS panel:</p>
<p style="color:#888;font-size:0.9em;">@layer reset, base, components, utilities;</p>Placering af lagdeklarationen
@layer-deklarationen bør stå øverst i dit stilark (eller i hovedfilen til importer). Du kan tilføje stilarter til lagene i vilkårlig rækkefølge efter deklarationen – prioriteten bestemmes af deklarationsrækkefølgen, ikke af hvor stilarterne tilføjes.
Hvorfor kilderekkefølgen ikke betyder noget for lag
Fordi lagets prioritet bestemmes på deklarationstidspunktet, kan du tilføje stilarter til et lag hvor som helst – selv før laget er deklareret ved at referere til det fremadrettet. Det er den deklarerede rækkefølge, der betyder noget.
Regel for lagprioritet
En deklaration i et senere lag vinder altid over en deklaration i et tidligere lag, uanset specificitet:
<p>Reset layer !important paragraph (red)</p>
<div id="header">Components layer header (blue)</div>Stilarter uden lag
Stilarter, der placeres uden for alle lag, kaldes lagløse. De har den højeste prioritet – endnu højere end det senest deklarerede lag. Brug dette til nødoverstyringer, der altid skal vinde.
Prioritetsstakken
Den komplette prioritetsrækkefølge (fra højeste til laveste for stilarter fra sidens forfatter):
- Lagløse stilarter (uden for alle @layer)
- Det senest deklarerede lag (f.eks. utilities)
- Det næstsenest deklarerede lag (f.eks. komponenter)
- Tidligere lag (base, reset)
Omvending af !important i lag
!important i lag er vanskeligt: Det vender lagrækkefølgen for den pågældende deklaration. !important i det tidligste lag vinder over !important i senere lag. Det svarer til den oprindelige kaskadeadfærd for bruger- og forfatterstilarter.
Indlejrede lag
Lag kan være indlejrede ved hjælp af punktnotation:
<p>This scene declares nested layers with dot notation — see the CSS panel.</p>Praktisk opsætningseksempel
En realistisk lagopsætning til et projekt:
<p>A realistic project layer order — see the CSS panel.</p>Hurtigt tjek
Lag deklareres som: @layer base, components, utilities. Hvilket lags stilarter vinder ved en konflikt?
Opsummering
@layer opretter eksplicit ordnede kaskadelag. Deklarer lagenes navne i prioritetsrækkefølge (laveste først). Senere lag vinder altid over tidligere lag, uafhængigt af specificitet. Lagløse stilarter har den højeste prioritet. !important vender lagprioritetsrækkefølgen for den pågældende deklaration.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “@layer-erklæring og rækkefølge” gratis?
Ja — hele teksten til “@layer-erklæring og rækkefølge” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “@layer-erklæring og rækkefølge”?
Erklær navngivne kaskadelag, og styr deres prioritetsrækkefølge med @layer-udsagn. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “@layer-erklæring og rækkefølge”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- @layer-erklæring og rækkefølge
- Tilføjelse af typografier til lag
- Lagprioritet og samspillet med !important
- Lag i tredjepartskode