Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Universal Selector (Bộ chọn toàn cục) trong CSS

Universal Selector * khớp với **bất kỳ element nào** trong document. Kết hợp với namespace có thể chọn element trong namespace cụ thể.

Cú pháp cơ bản

* {
  color: #FFFF00; /* Màu vàng cho TẤT CẢ element */
}

Ứng dụng phổ biến

1. CSS Reset / Normalize (box-sizing)

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

2. Debug / Outline mọi element

* { outline: 1px solid red; }

3. Kế thừa (inheritance) ép buộc

* {
  font-family: inherit;
  color: inherit;
}

Kết hợp với namespace

/* Tất cả element trong namespace SVG */
svg|* { fill: currentColor; }

/* Tất cả element trong namespace HTML (mặc định) */
*|* { color: black; }

/* Tất cả element bất kể namespace */
|* { box-sizing: border-box; }

Hiệu năng & Lưu ý

  • Universal selector **rất nhanh** (browser optimize tốt), không gây chậm như lời đồn đại cũ.
  • Không lạm dụng cho style phức tạp (chỉ dùng reset, inherit, debug).
  • Độ đặc hiệu: (0, 0, 0) - thấp nhất, dễ bị ghi đè.