CSS @layer 规则

Paglalarawan at paggamit

CSS @layer Ang mga patakaran ay maaaring gamitin upang kontrolin ang pagkakasunod-sunod ng estilo sa CSS layer (cascade layers).

Ito ay ginawa sa pamamagitan ng pagdefinir ng isang layer muna, pagkatapos ay inilalagay ang set ng patakaran na kailangan na susuri ayon sa tiyak na pagkakasunod-sunod sa loob ng layer.

@layer Maaaring may pangalan o walang pangalan na idindefinir.

Walang pangalan @layer Tawag naWalang pangalan na layerAng walang pangalan na layer ay sinusuri ayon sa pagkakasunod-sunod ng pagsasalita (tingnan ang halimbawa sa ibaba). Sila ay sumusunod sa default na pagkakasunod-sunod (mula itaas hanggangibaba).

May pinakamahusay na pangalan @layer Tawag naPangalang layerMula sa ibaba, maaring tukuyin ang eksaktong pagkakasunod-sunod na kailangan sa pamamagitan ng pangalang layer (tingnan ang halimbawa sa ibaba). Ang pagkakasunod-sunod ay mula sa pinakamalapit hanggang sa pinakamalapit, na inilalagay mula sang-kanan papunta sa kaliwa.

Mga halimbawa

Halimbawa 1

Gamitin ang walang pangalan na layer (ang mga ito ay sumusunod sa default na pagkakasunod-sunod - mula itaas hanggangibaba):

/* Layer 1 */
@layer {
  body {
    background: pink;
  }
}
/* Layer 2 */
@layer {
  body {
    background: lightblue; /* Ang huling layer ang magiging epektibo */
  }
}

Subukan nang personal

Halimbawa 2

Gamitin ang pangalang layer (at tukuyin ang eksaktong pagkakasunod-sunod na kailangan):

/* Tukuyin ang eksaktong pagkakasunud-sunod ng layer */
@layer bgblue, bgpink;
/* Layer 1 */
@layer bgpink {
  body {
    background: pink; /* Magiging epektibo */
  }
}
/* Layer 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Subukan nang personal

CSS Grammar

@layer name {
  css declarations;
}

Halaga ng atribute

Suporta ng browser

Ang mga numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa @ patakaran.