Bộ chọn phần tử (Element/Type Selector)
Bộ chọn phần tử (element selector) chọn **tất cả các phần tử** có tên thẻ HTML khớp. Đây là bộ chọn cơ bản nhất, độ đặc hiệu thấp nhất (0,0,1).
Cú pháp
ten-the {
/* Quy tắc CSS áp dụng cho TẤT CẢ thẻ này */
}
Ví dụ: Chọn tất cả <p>
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
background-color: orange;
}
</style>
</head>
<body>
<h1>Demo Website</h1>
<h2>Learning</h2>
<p>Tutorials on web dev, programming, database, networking, etc.</p>
<p>Every tutorials has lessons with illustrations and figures.</p>
</body>
</html>
Đặc điểm quan trọng
- Toàn cục: Áp dụng cho mọi `
` trong trang, trừ khi bị ghi đè.
- Độ đặc hiệu thấp: Dễ bị ghi đè bởi class, ID, inline style.
- Reset/Normalize: Thường dùng trong CSS reset:
p { margin: 0; }.
Kết hợp với các bộ chọn khác
| Selector | Ý nghĩa |
|---|---|
p | Tất cả thẻ p |
.class p | Thẻ p bên trong element có class |
p.class | Thẻ p CÓ class này |
p#id | Thẻ p CÓ id này |
div > p | Thẻ p con trực tiếp của div |
div p | Thẻ p bất kỳ cấp bên trong div |
Best Practice
Dùng element selector cho base styles (typography, spacing mặc định). Tránh dùng cho layout cụ thể - hãy dùng class (BEM, utility-first).