Có những loại CSS selector chính nào?

Question

Accepted Answer

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ả

*/ .card { } /* class: các phần tử có class="card" (tái sử dụng được) */ #header { } /* id: phần tử duy nhất có id="header" (duy nhất) */ * { } /* universal: mọi phần tử */ [type="text"]{ } /* attribute: các input có type=text */ ``` ## Combinator — mối quan hệ giữa các phần tử ```css .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. ## Pseudo-class và pseudo-element ```css 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 */ ``` ## Nhóm và các selector hiện đại ```css 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 */ ``` ## Tại sao điều này quan trọng 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ý.