Bộ kết hợp CSS
Bộ kết hợp CSS
Bộ kết hợp là thứ giải thích mối quan hệ giữa các bộ chọn.
Bộ chọn CSS có thể chứa nhiều bộ chọn đơn giản. Giữa các bộ chọn đơn giản, chúng ta có thể bao gồm một bộ kết hợp.
Có bốn tổ hợp khác nhau trong CSS:
- bộ chọn con cháu (dấu cách)
- bộ chọn con (>)
- bộ chọn anh chị em liền kề (+)
- bộ chọn anh chị em chung (~)
Bộ chọn con cháu
Bộ chọn con cháu khớp với tất cả các phần tử là hậu duệ của một phần tử được chỉ định.
Ví dụ sau chọn tất cả phần tử <p> bên trong phần tử <div>:
Bộ chọn con (>)
Bộ chọn con chọn tất cả các phần tử là phần tử 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à con của phần tử <div>:
Bộ chọn anh chị em liền kề (+)
Bộ chọn anh chị em liền kề được sử dụng để chọn một phần tử nằm ngay sau một phần tử cụ thể khác.
Các phần tử anh chị em phải có cùng phần tử cha 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>:
Bộ chọn anh chị em chung (~)
Bộ chọn anh chị em chung chọn tất cả các phần tử là anh chị em tiếp theo 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 em tiếp theo của phần tử <div>:
Tất cả các bộ chọn kết hợp CSS
Selector | Example | Example description |
---|---|---|
element element | div p | Selects all <p> elements inside <div> elements |
element>element | div > p | Selects all <p> elements where the parent is a <div> element |
element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |