Bộ tổ hợp anh chị em chung (~) trong CSS trông giống như sau khi sử dụng:
.featured-image ~ p ( font-size: 90%; )Trong ví dụ đó, bạn sẽ chọn tất cả các đoạn trong một bài viết đứng sau hình ảnh nổi bật (một phần tử có tên lớp là “hình ảnh nổi bật”) và làm cho chúng nhỏ hơn một chút font-size.
Thao tác này chọn các phần tử ở cùng cấp độ phân cấp. Trong ví dụ này .featured-imagevà các pphần tử ở cùng một hệ thống phân cấp. Nếu bộ chọn tiếp tục qua phoặc trước đó .featured-image, các quy tắc bình thường sẽ được áp dụng. Vì vậy, .featured-image ~ p spanvẫn sẽ chọn các nhịp là hậu duệ của bất kỳ .featured-image ~ ptrận đấu nào.
Thông số kỹ thuật cho bộ chọn cấp 4 gọi đây là “Bộ kết hợp anh chị em”.
Bản giới thiệu
Đây là một ví dụ khác làm nổi bật tất cả các pphần tử tuân theo img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Điều này sẽ dẫn đến những điều sau:
Quirks
WebKit đã từng có một điểm khó hiểu là bạn không thể sử dụng chúng với các bộ chọn giả. Giống:
input:checked ~ div ( /* Wouldn't work */ )Tôi không biết phiên bản chính xác của các trình duyệt đã sửa lỗi này, nhưng hiện nó đã được sửa.
Thêm thông tin
- Bộ chọn Trẻ em và Anh chị em
- Tương tự với Bộ kết hợp anh chị em liền kề.
- Tài liệu MDN
Hỗ trợ trình duyệt
| Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
|---|---|---|---|---|---|---|
| Bất kì | 3+ | 1+ | 9+ | 7+ | Bất kì | Bất kì |