Bài 25: Vùng chọn trong CSS


Bộ tổ hợp trong CSS (CSS Combinators)

Lưu ý:Một bộ tổ hợp là mối liên hệ giữa các selector.

Bộ chọn CSS có thể có nhiều hơn một bộ chọn. Giữa các bộ chọn đơn giản, chúng ta có thể bao gồm bộ tổ hợp.

Có bốn tổ hợp khác nhau trong CSS:

  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

Descendant Selector

Descendant selector khớp với tất cả các phần tử là con của một phần tử được chỉ định.
Ví dụ sau chọn tất cả các phần tử p bên trong phần tử div.
Ví dụ:


div p {
  background-color: yellow;
}

Child Selector (>)

Child Selector chọn tất cả các phần tử là con của một phần tử được chỉ định.
Ví dụ sau chọn tất cả các phần tử p là phần tử con của một phần tử div
Ví dụ:


div > p {
  background-color: yellow;
}

Adjacent Sibling Selector (+)

Adjacent sibling selector là chọn một phần tử nằm sau phần tử khác.
Các phần tử anh/chị/em phải có cùng một phần tử mẹ và liền kề có nghĩa là ngay sau đó.
Ví dụ sau chọn phần tử p đầu tiên được đặt ngay sau phần tử div.
Ví dụ:


div + p {
  background-color: yellow;
}

General Sibling Selector (~)

General sibling selector chọn tất cả các phần tử là anh/chị/em của một phần tử được chỉ định.
Ví dụ sau chọn tất cả các phần tử p là anh/chị/em của phần tử div.
Ví dụ:


div ~ p {
  background-color: yellow;
}

Tất cả các Combinator Selectors trong CSS

Selector Ví dụ Mô tả ví dụ
element element div p Chọn tất cả phần tử p bên trong phần tử div
element>element div > p Chọn tất cả phần tử p trong đó phần tử gốclà phần tử div
element+element div + p Chọn phần tử p đầu tiên được đặt ngay sau phần tử div
element1~element2 p ~ ul Chọn mọi phần tử p đứng trước phần tử div

Có thể bạn sẽ thích…

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

EnglishFrenchJapaneseRussianVietnamese