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


858

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ì?


3
Kiểm tra bản demo bạn sẽ hiểu Dưới đây là danh sách các bộ chọn CSS
Dipak

@TylerH, đó là một thứ rất phổ biến được sử dụng trong các bài đăng Stack Overflow, vui lòng bình tĩnh, tôi không có ý định làm cho nó cảm thấy tồi tệ hơn.
Asen Khachaturyan

@ArsenKhachaturyan Có thể bạn hiểu lầm; cú pháp trích dẫn khối là để chỉ ra một trích dẫn , đó là khi người dùng đang chỉ ra một cái gì đó (văn bản, hình ảnh, mã, v.v.) không phải là công việc hoặc từ riêng của họ, mà được sao chép từ một nơi khác. Giống như tất cả các định dạng, nó có một mục đích ngữ nghĩa; nó không phải là một cái gì đó để thêm willy-nilly. Tương tự như vậy, xin vui lòng không thêm đánh dấu đậm ngẫu nhiên vào các từ. Nó nên được sử dụng để nhấn mạnh, tiết kiệm.
TylerH

@TylerH Tôi hiểu rằng tên của nó là "quote" và cũng chính ý nghĩa của "quote". Tuy nhiên, đôi khi bạn thực sự muốn phân biệt các câu hỏi với văn bản thông thường, bạn có thể thử một số kỹ thuật nhấn mạnh như tôi đã làm. Để làm mờ nó cũng rõ ràng để sử dụng khi bạn muốn nhấn mạnh những thứ, như từ khóa hoặc thuật ngữ nổi tiếng. Tôi thường không thích khi mọi người sử dụng bầm vì những lý do không rõ nhưng đôi khi nó có thể được sử dụng để mọi người dễ dàng tìm thấy thông tin liên quan đến chủ đề.
Asen Khachaturyan

@ArsenKhachaturyan Xin đừng làm vậy. >chỉ dành cho dấu ngoặc kép , nó không bao giờ được sử dụng cho bất kỳ mục đích nào khác. Bạn cũng không nên in đậm tên của các công nghệ ngẫu nhiên trong câu hỏi. Chúng ta có thể thấy những công nghệ có liên quan thông qua các thẻ.
meagar

Câu trả lời:


1371

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:

  • .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ó.


13
"Không nhất thiết phải ngay lập tức" là phần chính của mô tả này.
PanicBus

1
Có phải cũng có một bộ chọn cho tất cả các thành phần có cùng cha mẹ không?
Nick N.

1
@NickN. ý bạn là .parent > *sao
Salman A

@SalmanA không chính xác, tôi đã hy vọng có một bộ chọn mà bạn có thể sử dụng, nếu bạn không biết cha mẹ.
Nick N.

7
@ NickN. Không có. CSS được tạo ra với đề xuất rằng trình phân tích cú pháp CSS không bao giờ nhìn lại trong DOM để tạo một kết quả khớp. Đó là cùng một lý do mà không có bộ chọn cha.
yunzen

191

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


2
Điều này có ý nghĩa nhất. Thuật ngữ của Layman để giải cứu một lần nữa. Bây giờ tôi có thể đọc các tài liệu kỹ thuật.
TheRealChx101

2
Có một bộ chọn anh chị em cho TẤT CẢ anh chị em, không chỉ những người theo sau?
Elijah Mock

1
@EliTheHuman, không. Vui lòng tham khảo bài viết SO này để biết thêm chi tiết - stackoverflow.com/a/11813469/6830901
Lijo Joseph

174

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


31

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 combinator+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 đố


Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.