Bộ chọn toàn cầu CSS (*) nhắm mục tiêu mọi phần tử HTML trên trang.
Cú pháp bộ chọn toàn cầu:
* { tên-thuộc-tính: giá-trị; }Ví dụ, để reset margin và padding cho tất cả phần tử:
* { margin: 0; padding: 0; box-sizing: border-box; }Ký hiệu sao (*) là cú pháp CSS cụ thể cho bộ chọn toàn cầu. Nó khớp với mọi loại phần tử: div, p, span, button, v.v.
Bây giờ hãy áp dụng vào ví dụ thực tế.
Giả sử bạn muốn đặt box-sizing: border-box cho toàn bộ trang để tính toán kích thước nhất quán:
*, *::before, *::after { box-sizing: border-box; }Mã trên dùng bộ chọn toàn cầu * để áp dụng border-box cho:
- Tất cả bộ chọn phần tử thông thường (
div,p,button, v.v.) - Tất cả bộ chọn giả
::beforevà::after
Bộ chọn toàn cầu mạnh nhưng nên dùng thận trọng vì ảnh hưởng mọi thứ. Thường dùng cho CSS reset hoặc thiết lập giá trị toàn cục như box-sizing, font-family cơ bản.
Lưu ý: tránh dùng bộ chọn toàn cầu cho kiểu dáng cụ thể (như color, margin lớn) vì sẽ gây khó khăn khi ghi đè sau này.