Điều khoản CSS @layer

Định nghĩa và cách sử dụng

CSS @layer Quy tắc có thể được sử dụng để kiểm soát thứ tự đánh giá phong cách của CSS lớp chồng (cascade layers).

Đây được thực hiện bằng cách định nghĩa một lớp trước, sau đó bao bọc bộ quy tắc cần đánh giá theo thứ tự cụ thể trong lớp đó.

@layer Có thể định nghĩa với tên hoặc không có tên.

Không có tên @layer Gọi làLớp ẩn danh。Lớp ẩn danh được đánh giá theo thứ tự của chúng (xem ví dụ dưới đây). Chúng tuân theo thứ tự chồng chéo mặc định (từ trên xuống).

Có tên duy nhất @layer Gọi làLớp đặt tên。Bằng cách sử dụng lớp đặt tên, chúng ta có thể chỉ định thứ tự chồng chéo chính xác cần thiết (xem ví dụ dưới đây). Thứ tự từ không cụ thể nhất đến cụ thể nhất, sắp xếp từ trái sang phải.

Mô hình

Ví dụ 1

Sử dụng lớp ẩn danh (sẽ tuân theo thứ tự chồng chéo mặc định - từ trên xuống):

/* 層 1 */
@layer {
  body {
    background: pink;
  }
}
/* 層 2 */
@layer {
  body {
    background: lightblue; /* Lớp cuối cùng hoạt động */
  }
}

Thử ngay

Ví dụ 2

Sử dụng lớp đặt tên (và chỉ định thứ tự chồng chéo chính xác cần thiết):

/* Định nghĩa thứ tự chồng chéo chính xác */
@layer bgblue, bgpink;
/* 層 1 */
@layer bgpink {
  body {
    background: pink; /* Hiệu lực */
  }
}
/* 層 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

Thử ngay

Ngữ pháp CSS

@layer name {
  css declarations;
}

Giá trị thuộc tính

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản trình duyệt đầu tiên hoàn toàn hỗ trợ quy tắc @ này.