Selector xác định một rule áp dụng cho những phần tử nào. Chúng trải dài từ đơn giản (theo tag) đến các combinator mạnh mẽ.
css
/* Basic selectors */
p { } /* type: tất cả <p> */
.card { }
{ }
* { }
{ }
Selector xác định một rule áp dụng cho những phần tử nào. Chúng trải dài từ đơn giản (theo tag) đến các combinator mạnh mẽ.
/* Basic selectors */
p { } /* type: tất cả <p> */
.card { }
{ }
* { }
{ }
.menu li { } /* descendant: bất kỳ li nào BÊN TRONG .menu (ở mọi độ sâu) */
.menu > li { } /* child: chỉ li là con TRỰC TIẾP */
h2 + p { } /* adjacent sibling: p ngay SAU một h2 */
h2 ~ p { } /* general sibling: tất cả p anh em sau một h2 */
Sự khác biệt giữa dấu cách (descendant) và > (con trực tiếp) rất quan trọng: .menu li khớp cả những li lồng sâu, trong khi .menu > li chỉ khớp ở cấp trên cùng.
a:hover { } /* state: khi đang hover */
li:first-child { } /* structural: li đầu tiên */
li:nth-child(2n){ } /* mọi li chẵn */
p::first-line { } /* pseudo-element: dòng đầu tiên được render */
h1, h2, h3 { } /* áp dụng cho cả ba */
:is(h1, h2) a { } /* :is() rút gọn danh sách selector dài */
.card:has(img) { } /* :has() — một phần tử cha CHỨA một img */
Selector là cách bạn kết nối style với markup.
Thành thạo class (công cụ chủ lực), combinator (cho các mối quan hệ), và pseudo-class structural/state cho phép bạn nhắm mục tiêu chính xác mà không phải thêm class khắp nơi — và :is()/:has() hiện đại giúp việc nhắm mục tiêu phức tạp trở nên ngắn gọn.
Ưu tiên class hơn id/lồng quá sâu để giữ specificity dễ quản lý.
Thư viện câu hỏi phỏng vấn IT với đáp án chi tiết — từ Junior đến Senior.
Ủng hộ