Bộ điều hợp anh em sau CSS3 (~)

Định nghĩa và cách sử dụng

Bộ điều hợp anh em sau CSS (~) khớp tất cả các phần tử ở sau phần tử đầu tiên (element1xuất hiện sau element2.

element1 và element2 phải chia sẻ cùng một phần tử bậc cao, nhưng element2 Không cần ngay sau element1 sau đó.

Mẫu

Chọn và đặt kiểu cho tất cả các <ul> sau khi xuất hiện trong phần tử <p> và chia sẻ cùng một phần tử bậc cao:

p ~ ul {
  background-color: gold;
  border: 1px solid gray;
}

Thử trực tiếp

Ngữ pháp CSS

element1 ~ element2 {
  ký tự biểu thức css;
}

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số liệu trong bảng biểu thị phiên bản đầu tiên của trình duyệt hỗ trợ đầy đủ bộ điều hợp này.