Что такое символ ~ ~ в CSS?

Question

Может ли кто-нибудь объяснить, что использует символ «~» в CSS?

У меня есть пример, где

.myclass label: hover ~ label: before { 
    opacity: 0.5; 
} 

я не получаю использование ~ символа здесь. Пожалуйста, помогите мне.

Answer 1

Этот селектор называется General Siblings Selector

См Docs

Команда ~ комбинатор отделяет два селектора и соответствует второй элемент, только если он предшествует первому, и оба имеют общую родителя.

От CSS Specifications:

следующих-родственный комбинатор выполнен из "тильды" (U + 007E, ~) символ, который разделяет две последовательности простых селекторов. Элементы, представленные двумя последовательностями, имеют один и тот же родительский элемент в дереве документов, и элемент, представленный первой последовательностью, предшествует (не обязательно сразу), представленному вторым.

Пример Демонстрационный

p ~ span { 
 
    color: red; 
 
}

<span>This is not red.</span> 
 
<p>Here is a paragraph.</p> 
 
<code>Here is some code.</code> 
 
<span>And here is a span.</span>

Answer 2

Я думаю, что это сделает вас ясно

element1~element2

p ~ ul Selects every <ul> element that are preceded by a <p> element