Bộ chọn CSS của ~ ~ (tilde / squiggle / twiddle) nghĩa là gì?

Tìm kiếm ~nhân vật không dễ dàng. Tôi đã xem qua một số CSS và tìm thấy nó

.check:checked ~ .content {
}

Nó có nghĩa là gì?

Các ~selector là trong thực tế các combinator anh chị em chung (đổi tên thành tiếp theo-sibling combinator trong selectors Cấp 4 ):

Bộ kết hợp anh chị em chung được tạo từ ký tự "tilde" (U + 007E, ~) tách hai chuỗi các bộ chọn đơn giản. Các phần tử được đại diện bởi hai chuỗi chia sẻ cùng một cha mẹ trong cây tài liệu và phần tử được đại diện bởi trình tự đầu tiên có trước (không nhất thiết phải ngay lập tức) phần tử được đại diện bởi phần thứ hai.

Hãy xem xét ví dụ sau:

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b phù hợp với mục danh sách thứ 4 và thứ 5 vì chúng:

• Là .bcác yếu tố
• Là anh chị em của .a
• Xuất hiện sau .atheo thứ tự nguồn HTML.

Tương tự như vậy, .check:checked ~ .contentphù hợp với tất cả các .contentyếu tố là anh em ruột .check:checkedvà xuất hiện sau nó.

Tốt để kiểm tra các tổ hợp khác trong gia đình và để lấy lại cái cụ thể này là gì.

• ul li
• ul > li
• ul + ul
• ul ~ ul

Danh sách kiểm tra ví dụ:

• ul li- Nhìn vào bên trong - Chọn tất cả các liyếu tố được đặt (bất cứ nơi nào) bên trong ul; Bộ chọn hậu duệ
• ul > li- Nhìn vào bên trong - Chỉ chọn các li yếu tố trực tiếp của ul; tức là nó sẽ chỉ chọn con trực tiếp licủa ul; Bộ chọn con hoặc Bộ chọn kết hợp con
• ul + ul- Nhìn ra bên ngoài - Chọn ulngay sau ul; Nó không nhìn vào bên trong, mà nhìn ra bên ngoài để tìm phần tử ngay sau đó; Liền kề chọn anh chị em
• ul ~ ul- Nhìn ra bên ngoài - Chọn tất cả những ulthứ theo sau ulnó không quan trọng, nhưng cả hai ulnên có cùng cha mẹ; Tổng tuyển chọn anh chị em

Người mà chúng tôi đang xem xét ở đây là General Selling Selector

Tổng hợp anh chị em ruột

Bộ chọn kết hợp anh chị em chung rất giống với bộ chọn kết hợp anh chị em liền kề. Sự khác biệt là phần tử được chọn không cần thành công ngay phần tử đầu tiên, nhưng có thể xuất hiện ở bất cứ đâu sau phần tử đó.

Thêm thông tin

Nó là General sibling combinator và được giải thích trong câu trả lời của @ Salaman rất tốt.

Những gì tôi đã bỏ lỡ Adjacent sibling combinatorlà +và liên quan chặt chẽ đến~ .

ví dụ sẽ là

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

• Khớp các yếu tố .b
• Liền kề .a
• Sau khi .aở trong HTML

Trong ví dụ trên nó sẽ đánh dấu thứ 2 linhưng không phải thứ 4.

   .a + .b {
     background-color: #ff0000;
   }

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

Câu đố

Lưu ý rằng trong bộ chọn thuộc tính (ví dụ [attr~=value]:), dấu ngã

Đại diện cho một thành phần có tên thuộc tính của attr có giá trị là danh sách các từ được phân tách bằng khoảng trắng, một trong số đó là giá trị chính xác .

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribution_selector