CSS @layer กฎ

การกำหนดและการใช้งาน

CSS @layer กฎสามารถใช้เพื่อควบคุมลำดับที่ประเมินสไตล์ของ CSS ชั้นทับเข้มข้น (cascade layers)

นี่สามารถทำได้โดยการกำหนดชั้นแรก แล้วลอกกลุ่มกฎที่ต้องการประเมินตามลำดับที่เฉพาะในชั้นนั้น

@layer สามารถกำหนดชื่อหรือไม่มีชื่อ

ไม่มีชื่อ @layer เรียกว่าชั้นที่ไม่มีชื่อชั้นที่ไม่มีชื่อจะประเมินตามลำดับที่ปรากฏของการประกาศ (ดูตัวอย่างด้านล่าง) พวกเขาตามลำดับที่ทับเข้มข้นโดยมาตรฐาน (จากบนไปยังล่าง)

ชื่อชั้นที่มีชื่อเดียวกัน @layer เรียกว่าชื่อชั้นโดยผ่านชื่อชั้น เราสามารถกำหนดลำดับที่เข้าข้างหน้าที่เฉพาะตามที่ต้องการ (ดูตัวอย่างด้านล่าง) ลำดับนี้จัดเรียงจากที่เด่นที่สุดไปยังที่เด่นน้อย จากซ้ายไปขวา

ตัวอย่าง

ตัวอย่าง 1

ใช้ชั้นที่ไม่มีชื่อ (จะตามลำดับที่ปรากฏของการประกาศ - จากบนไปยังล่าง) :

/* ชั้น 1 */
@layer {
  body {
    background: pink;
  }
}
/* ชั้น 2 */
@layer {
  body {
    background: lightblue; /* ชั้นที่สุดท้ายที่ทำงาน */
  }
}

ทดลองด้วยตัวเอง

ตัวอย่าง 2

ใช้ชื่อชั้น (และกำหนดลำดับที่เข้าข้างหน้าที่เฉพาะ) :

/* กำหนดลำดับที่เข้าข้างหน้าของทับเข้มข้น */
@layer bgblue, bgpink;
/* ชั้น 1 */
@layer bgpink {
  body {
    background: pink; /* ทำงาน */
  }
}
/* ชั้น 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

ทดลองด้วยตัวเอง

สyntax CSS

@layer name {
  declarations css;
}

ค่าคุณสมบัติ

การสนับสนุนบราวเซอร์

ตัวเลขในตารางนี้ระบุว่าบราวเซอร์ที่สนับสนุนบริบท @ รูปแบบเวอร์ชั่น