Dấu ngã (~) có nghĩa là gì trong CSS

Question

Tôi muốn biết ý nghĩa của (~) trong css.

#img1:hover ~ #img2 { 
    opacity: 0; 
} 

Trong studio trực quan, tôi gặp lỗi 'chuỗi ký tự không mong muốn' khi tôi sử dụng biểu tượng này. ý nghĩa thực sự của điều này trong CSS là gì. nó làm gì?

Answer 1

http://www.w3.org/TR/selectors/

8.3.2. Bộ phối hợp anh chị em chung

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

dụ

h1 ~ pre 

khớp với <pre> đây:

<h1>Definition of the function a</h1> 
<p>Function a(x) has to be applied to all figures in the table.</p> 
<pre>function a(x) = 12x/13.5</pre> 

Ngoài ra còn có + chọn, cho combinator anh chị em liền kề: với h1 + pre thẻ <pre> sẽ cần phải bàn cãi sau <h1>

Answer 2

Nó áp dụng kiểu cho tất cả các phần tử khớp với công cụ chọn thứ hai nếu chúng xuất hiện sau các phần tử khớp với công cụ chọn đầu tiên. Ví dụ, với một đoạn mã HTML:

<p>Line one</p> 
<hr /> 
<p>Line two</p> 
<p>Line three</p> 

và một quy tắc CSS:

hr ~ p { 
    font-weight: bold; 
} 

chỉ <p>Line two</p> và <p>Line three</p> sẽ xuất hiện đậm. Trong ví dụ của bạn, tôi nghĩ rằng Visual Studio đang gặp sự cố khi giải thích công cụ sửa đổi :hover vì nó không thực sự là một phần tử. Nếu bạn xóa nó khỏi quy tắc, nó có thể hoạt động chính xác.