Что означает символ тильда (~) в CSS

Я хочу знать, что означает (~) в css.

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

В визуальной студии я получаю ошибку "непредвиденная последовательность символов", когда я использую этот символ. каков фактический смысл этого в CSS. что он делает?

Ответ 1

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

8.3.2. Общая комбинация братьев и сестер

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

Пример

h1 ~ pre

соответствует <pre> здесь:

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

Существует также селектор + для смежного комбинатора: с тегом h1 + pre тег <pre> должен быть сразу после <h1>

Ответ 2

Он применяет стиль ко всем элементам, соответствующим второму селектору, если они появляются после элементов, соответствующих первому селектору. Например, с учетом фрагмента HTML:

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

и правило CSS:

hr ~ p {
    font-weight: bold;
}

только <p>Line two</p> и <p>Line three</p> будут выделены жирным шрифтом. В вашем примере, я думаю, что Visual Studio испытывает проблему с интерпретацией модификатора :hover, так как это не элемент. Если вы удалите его из правила, он может работать правильно.