Sách tham khảo chọn phần tử CSS

Chọn lựa CSS

Chọn lựa CSS được sử dụng để "tìm kiếm" (hoặc chọn) các yếu tố HTML mà bạn muốn thiết lập phong cách.

Sử dụng công cụ kiểm tra chọn lựa CSS của chúng tôi để minh họa các chọn lựa khác nhau.

Chọn lựa đơn giản CSS

Chọn các yếu tố dựa trên tên yếu tố, id và class. Ngoài ra, còn có chọn lựa phổ quát (*)

Chọn Ví dụ Mô tả ví dụ
element p Chọn tất cả các yếu tố <p>.
#id #firstname Chọn yếu tố có id="firstname".
* * Chọn tất cả các yếu tố.
.class .intro Chọn các yếu tố có class="intro".

Chọn bộ thuộc tính CSS

Chọn bộ thuộc tính của các yếu tố HTML có bộ thuộc tính đã cho.

Chọn Ví dụ Mô tả ví dụ
[attribute] [target] Chọn các yếu tố có thuộc tính target.
[attribute=value] [target=_blank] Chọn các yếu tố có thuộc tính target="_blank".
[attribute~=value] [title~=flower] Chọn các yếu tố có giá trị title chứa từ "flower".
[attribute|=value] [lang|=en] Chọn các yếu tố có giá trị lang bắt đầu bằng "en".
[attribute^=value] a[href^="https"] Chọn mỗi yếu tố <a> có giá trị href bắt đầu bằng "https".
[attribute$=value] a[href$=".pdf"] Chọn mỗi yếu tố <a> có giá trị src kết thúc bằng ".pdf".
[attribute*=value] a[href*="codew3c"] Chọn mỗi yếu tố <a> có chuỗi con "abc" trong giá trị href.

Chọn phần tử嵌套 CSS

Chọn Ví dụ Mô tả ví dụ
& & Áp dụng phong cách cho yếu tố trong ngữ cảnh của yếu tố khác