Giới thiệu về khái niệm bộ chọn trong CSS
Khi bạn bắt đầu tìm hiểu về thiết kế web, chắc chắn rằng bạn sẽ gặp phải một công cụ quan trọng không thể thiếu - chính là việc áp dụng kiểu dáng cho các phần tử HTML. Để thực hiện điều này, bạn cần phải có khả năng chỉ định chính xác các yếu tố mà bạn muốn thay đổi. Đây chính là lúc mà khái niệm về một bộ chọn trở nên quan trọng. Thực tế, bộ chọn là một phần không thể thiếu trong mọi quy tắc CSS, cho phép bạn xác định rõ ràng và chính xác các phần tử mà bạn muốn áp dụng kiểu dáng.Phân loại các bộ chọn trong CSS
1. Bộ chọn theo kiểu (Type Selector)
Bộ chọn theo kiểu được sử dụng để chọn tất cả các phần tử HTML có cùng tên. Ví dụ, nếu bạn muốn áp dụng một kiểu dáng cho tất cả các thẻ `` trong tài liệu của mình, bạn có thể viết một quy tắc CSS như sau: ```css p { color: blue; } ``` Khi đó, tất cả các đoạn văn bản trong các thẻ `
` sẽ có màu xanh.
2. Bộ chọn theo lớp (Class Selector)
Bộ chọn theo lớp cho phép bạn chọn các phần tử có thuộc tính `class` cụ thể. Đây là một trong những bộ chọn phổ biến nhất, vì lớp có thể được gán cho nhiều phần tử khác nhau. Ví dụ: ```css .intro { font-size: 18px; } ``` Tất cả các phần tử có class là `intro` sẽ được áp dụng kiểu chữ với kích thước 18px.3. Bộ chọn theo ID (ID Selector)
Bộ chọn theo ID cho phép bạn chọn một phần tử duy nhất dựa trên thuộc tính `id`. ID phải là duy nhất trong toàn bộ trang HTML. Ví dụ: ```css #header { background-color: #333; } ``` Quy tắc này sẽ áp dụng kiểu dáng cho phần tử có ID là `header`.4. Bộ chọn thuộc tính (Attribute Selector)
Bộ chọn thuộc tính cho phép bạn chọn phần tử dựa trên giá trị của thuộc tính HTML. Ví dụ, nếu bạn muốn chọn tất cả các phần tử `` có thuộc tính `href`, bạn có thể viết: ```css a[href] { color: red; } ``` Điều này sẽ làm cho tất cả các liên kết có thuộc tính `href` có màu đỏ.Cách kết hợp các bộ chọn
Một trong những điểm mạnh của CSS là khả năng kết hợp nhiều bộ chọn khác nhau để tạo ra các quy tắc tinh vi hơn. Điều này giúp bạn có thể áp dụng kiểu dáng một cách linh hoạt và chính xác hơn. Dưới đây là một số cách để kết hợp bộ chọn:1. Kết hợp bộ chọn kiểu và lớp
Bạn có thể kết hợp bộ chọn kiểu và lớp để áp dụng kiểu dáng cho các phần tử cụ thể. Ví dụ: ```css div.intro { background-color: yellow; } ``` Quy tắc này sẽ áp dụng nền vàng cho tất cả các thẻ `` có class là `intro`.