CSS @layer sääntö

Määrittely ja käyttö

CSS @layer Säännöt voidaan käyttää hallitsemaan CSS-kerrostusten (cascade layers) arviointijärjestystä.

Tämä toteutetaan ensin määrittämällä kerros ja sitten sisällyttämällä siihen tarvittavat säännöt, jotka on arvioitava tietystä järjestyksestä.

@layer Voivat olla joko nimettyjä tai nimettömiä määriteltynä.

Nimetön @layer KutsutaanNimeton kerros。Nimettömät kerrokset arvioidaan määrittämisen järjestyksessä (katso alla oleva esimerkki). Ne noudattavat oletusarvoista kerrostusjärjestystä (ylhäältä alas).

Yksilöllisellä nimellä varustetulla @layer KutsutaanNimetty kerros。Nimetyillä kerroksilla voimme määrittää tarvittavan tarkan kerrostusjärjestyksen (katso alla oleva esimerkki). Järjestys on epämääräisimmästä määräytyvästä, vasemmalta oikealle.

Esimerkki

Esimerkki 1

Käytä nimettömiä kerroksia (ne noudattavat oletusarvoista kerrostusjärjestystä - ylhäältä alas):

/* Kerros 1 */
@layer {
  body {
    background: pink;
  }
}
/* Kerros 2 */
@layer {
  body {
    background: lightblue; /* Viimeinen kerros vaikuttaa */
  }
}

Kokeile itse

Esimerkki 2

Käytä nimettyjä kerroksia (ja määritä tarvittava tarkka kerrostusjärjestys):

/* Määritä tarkka kerrostusjärjestys */
@layer bgblue, bgpink;
/* Kerros 1 */
@layer bgpink {
  body {
    background: pink; /* Voimassa */
  }
}
/* Kerros 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Kokeile itse

CSS-grammatiikka

@layer name {
  css-deklaratiot;
}

Ominaisuusarvo

Selaimen tuki

Taulukon numerot ilmaisevat ensimmäisen täysin tukevan @ säännön selaimen version.