Cascade trong CSS nghĩa là gì?

Cascade là thuật toán chọn ra giá trị thắng khi nhiều khai báo cùng nhắm vào một thuộc tính của một element.

Thứ tự xét, từ trên xuống — dừng ngay khi phân định được:

1. Origin + !important: !important của user agent > !important của user > !important của tác giả > tác giả thường > user > user agent.
2. @layer — layer khai báo sau thắng layer trước; CSS không nằm trong layer nào thắng mọi layer.
3. Specificity — inline (1,0,0,0) > id (0,1,0,0) > class/attr/pseudo-class (0,0,1,0) > element (0,0,0,1).
4. Thứ tự xuất hiện — khai báo sau thắng.

css

@layer reset, components;

@layer reset      { a { color: black; } }
@layer components { a { color: blue; } }   /* thắng: layer khai báo sau */

a.link { color: red; }                     /* thắng cả hai: ngoài mọi layer */

Điểm hay sai: nhiều người xếp specificity lên trên @layer. Thực tế layer được xét trước specificity — một selector #id trong layer sớm vẫn thua một selector element ở layer sau.

Chốt: @layer sinh ra để không phải chạy đua !important khi nhúng thư viện ngoài — nhét CSS của thư viện vào layer thấp là ghi đè được bằng class thường.

Xem toàn bộ CSS cùng filter theo level & chủ đề con.

Mở danh sách CSS

Cascade là thuật toán chọn ra giá trị thắng khi nhiều khai báo cùng nhắm vào một thuộc tính của một element.

Thứ tự xét, từ trên xuống — dừng ngay khi phân định được:

css

@layer reset, components;

@layer reset      { a { color: black; } }
@layer components { a { color: blue; } }   /* thắng: layer khai báo sau */

a.link { color: red; }                     /* thắng cả hai: ngoài mọi layer */

Chốt: @layer sinh ra để không phải chạy đua !important khi nhúng thư viện ngoài — nhét CSS của thư viện vào layer thấp là ghi đè được bằng class thường.