Kết hợp CSS

Kết hợp CSS

Kết hợp là cơ chế giải thích mối quan hệ giữa các lựa chọn.

Chọn phần tử CSS có thể chứa nhiều lựa chọn đơn. Giữa các lựa chọn đơn, chúng ta có thể bao gồm một kết hợp.

Trong CSS có bốn loại kết hợp khác nhau:

  • Chọn phần tử后代 (khoảng trống)
  • Chọn phần tử con (>)
  • Chọn phần tử anh em gần (+)
  • Chọn phần tử anh em chung (~)

Chọn phần tử后代

Chọn phần tử后代 phù hợp với tất cả các phần tử后代 của phần tử được chỉ định.

Dưới đây là ví dụ chọn tất cả các thẻ <p> trong thẻ <div>.

Ví dụ

div p {
  background-color: yellow;
}

Thử ngay

Chọn phần tử con

Chọn phần tử con phù hợp với tất cả các phần tử con của phần tử được chỉ định.

Dưới đây là ví dụ chọn tất cả các thẻ <p> là phần tử con của thẻ <div>.

Ví dụ

div > p {
  background-color: yellow;
}

Thử ngay

Chọn phần tử anh em gần

Chọn phần tử anh em gần

Các phần tử anh em (đồng cấp) phải có cùng một phần tử cha, 'gần' có nghĩa là 'đứng sau'.

Dưới đây là ví dụ chọn tất cả các thẻ <p> đứng sau thẻ <div>.

Ví dụ

div + p {
  background-color: yellow;
}

Thử ngay

Chọn phần tử anh em chung

Chọn phần tử anh em chung phù hợp với tất cả các phần tử đồng cấp của phần tử được chỉ định.

Dưới đây là ví dụ chọn tất cả các thẻ <p> là đồng cấp của thẻ <div>.

Ví dụ

div ~ p {
  background-color: yellow;
}

Thử ngay

Tất cả các lựa chọn CSS kết hợp

Chọn phần tử Ví dụ Mô tả ví dụ
element element div p Chọn tất cả các thẻ <p> trong thẻ <div>.
element>element div > p Chọn tất cả các元素 <p> có cha là元素 <div>.
element+element div + p Chọn tất cả các元素 <p> sau元素 <div>.
element1~element2 p ~ ul Chọn mỗi <ul> có元素 <p> trước đó.

Đọc thêm

Sách bên ngoài:Chọn器 CSS con cháu

Sách bên ngoài:Chọn器 CSS con

Sách bên ngoài:Chọn器 CSS anh em