CSS @layer regel

Definisjon og bruk

CSS @layer Regler kan brukes til å kontrollere rekkefølgen for CSS-lagkaskader (cascade layers) som evaluerer stiler.

Dette oppnås ved først å definere et lag, og deretter pakk sammen regelsettene som skal evalueres i en bestemt rekkefølge i dette laget.

@layer Kan defineres med eller uten navn.

Uten navn @layer KaltAnonymt lag。Anonyme lag evalueres i henhold til erklæringsrekkefølgen (se eksemplet nedenfor). De følger standard lagkaskadeorden (fra topp til bunn).

Med et unikt navn @layer KaltNavngitt lag。Ved å bruke navngitte lag kan vi spesifisere den nødvendige eksakte lagkaskaden (se eksemplene nedenfor). Rekkefølgen er fra minst spesifikk til mest spesifikk, fra venstre til høyre.

Eksempel

Eksempel 1

Bruk anonyme lag (de vil følge standard lagkaskadeorden - fra topp til bunn):

/* Lag 1 */
@layer {
  body {
    background: pink;
  }
}
/* Lag 2 */
@layer {
  body {
    background: lightblue; /* Siste lag gjelder */
  }
}

Prøv selv

Eksempel 2

Bruk navngitte lag (og spesifiser den nødvendige eksakte lagkaskaden):

/* Spesifiser den eksakte lagkaskaden */
@layer bgblue, bgpink;
/* Lag 1 */
@layer bgpink {
  body {
    background: pink; /* Gjelder */
  }
}
/* Lag 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Prøv selv

CSS-syntaks

@layer navn {
  css-erklæringer;
}

Egenskapsverdi

Nettleserstøtte

Tallene i tabellen viser den første nettleserversjonen som fullt ut støtter @-regelen.