Bộ chọn phổ quát

Bài học 6 trên 15 trong khóa học Bộ chọn CSS của Coddy.

Bộ chọn toàn cục là một loại bộ chọn CSS đặc biệt, chọn tất cả phần tử trên trang web. Bộ chọn này được biểu thị bằng dấu hoa thị (*).

Ví dụ, bộ chọn * chọn tất cả phần tử trên trang.

Dưới đây là ví dụ về cách dùng bộ chọn toàn cục để tạo kiểu cho trang web:

* {
  color: red;
  font-size: 2em;
}

Quy tắc CSS này sẽ tạo kiểu cho tất cả phần tử trên trang thành màu đỏ và đặt cỡ chữ là 2em.

Khi nào nên dùng bộ chọn toàn cục?

Bạn có thể dùng bộ chọn toàn cục khi muốn tạo kiểu cho tất cả phần tử trên trang web. Ví dụ, bạn có thể dùng bộ chọn toàn cục để đặt cỡ chữ của tất cả phần tử trên trang thành 16px.

Bạn cũng có thể dùng bộ chọn toàn cục để tạo kiểu cho những phần tử chưa có bộ chọn nào khác. Ví dụ, nếu trang web có nhiều phần tử div nhưng bạn chưa gán thuộc tính class hoặc ID cho phần tử nào, bạn có thể dùng bộ chọn toàn cục để tạo kiểu cho tất cả phần tử div.

Thử thách

Dễ

Tạo một trang web có hai phần tử div.
Không thêm thuộc tính class hoặc ID cho bất kỳ phần tử div nào.
Dùng bộ chọn phổ quát để tạo kiểu cho tất cả phần tử div thành màu đỏ và có cỡ chữ 80px.

Tự làm thử

<html>
<head>
  <title>Universal Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
 
</body>
</html>

Tất cả bài học trong Bộ chọn CSS

1Giới thiệu về CSS Selectors

Mục đích của CSS Selectors Vì sao chúng quan trọng?

4Bộ chọn thuộc tính

Giới thiệu về bộ chọn thuộc tính Sự hiện diện và giá trị chính xác Bộ chọn giá trị thuộc tính Bộ chọn giá trị thuộc tính II Bộ chọn giá trị thuộc tính III

2Bộ chọn đơn giản

Bộ chọn kiểu Bộ chọn lớp Bộ chọn IDBộ chọn phổ quát

3Bộ chọn kết hợp

Bộ chọn phần tử con Bộ chọn phần tử hậu duệ Bộ chọn phần tử anh em liền kề Bộ chọn phần tử anh em tổng quát

Tự luyện tập: Playground Web