Các bộ chọn CSS được dùng để chọn phần tử HTML bằng cách khớp mỗi phần tử của một mẫu cho trước. Chúng ta định nghĩa kiểu bằng cách khai báo thuộc tính và giá trị của chúng bên trong bộ chọn.
Cú pháp
Cú pháp để khai báo kiểu như sau:
Selector { property: value; }
CSS có bộ chọn đơn giản, bộ chọn thuộc tính, lớp giả, phần tử giả và kết hợp bộ chọn qua các combinator chuẩn. Bảng sau liệt kê một số bộ chọn:
| Bộ chọn | Loại bộ chọn | Mô tả |
|---|---|---|
| * | Bộ chọn toàn cục | Khớp tất cả phần tử |
| e | Bộ chọn kiểu | Khớp tất cả phần tử kiểu e |
| e1 e2 | Bộ chọn hậu duệ | Khớp bất kỳ phần tử e2 nào là hậu duệ của phần tử e1. |
| e1>e2 | Bộ chọn con | Khớp bất kỳ phần tử e2 nào là con trực tiếp của e1. |
| e[bar="demo"] | Bộ chọn thuộc tính | Khớp bất kỳ phần tử e nào có thuộc tính "bar" giá trị chính xác "demo". |
| #id | Bộ chọn ID | Khớp phần tử có ID bằng "id". |
Ví dụ
Các ví dụ sau minh họa bộ chọn CSS:
<!DOCTYPE html> <html> <head> <style> p::first-line { background-color: lightgreen; color: white; text-decoration: overline black; } </style> </head> <body> <h2>Tiêu đề Demo</h2> <p>Đây là văn bản demo của chúng tôi. Chỉ dòng đầu tiên sẽ có kiểu khác. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. Đây là văn bản demo. </p> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
Ví dụ khác
<!DOCTYPE html> <html> <head> <style> p::first-line { background-color: lightgreen; color: white; text-decoration: overline red; } span { font-size: 1.4em; } #demo { box-shadow: inset 0 0 20px orange; } </style> </head> <body> <h2>Thông tin sinh viên</h2> <p><span>Sinh viên</span>chi tiết sẽ được đề cập ở đây. <span id="demo">Điểm sinh viên</span> bao gồm điểm số sinh viên kỳ cuối cùng tháng 7 năm 2018. Cùng với đó thứ hạng cũng được hiển thị.</p> </body> </html>
Kết quả
Đoạn mã trên cho kết quả sau:
