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

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

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

В Visual Studio при использовании этого символа я получаю сообщение об ошибке «неожиданная последовательность символов». каково фактическое значение этого в CSS. Что это делает?


css tilde
person Monie corleone    schedule 18.03.2013    source источник

Ответы (2)


arrow_upward
59
arrow_downward

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>

person MarcinJuraszek    schedule 18.03.2013

arrow_upward
26
arrow_downward

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

hr ~ p {
    font-weight: bold;
}
<p>Line one</p>
<hr />
<p>Line two</p>
<p>Line three</p>

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

person Neil T.    schedule 18.03.2013
comment
Замечали ли вы какие-либо проблемы с использованием ~ в различных браузерах? Последний Chrome, кажется, игнорирует это для меня. - person Nathan; 11.12.2018
comment
Я создал очень простой [index.html], содержащий только приведенный выше пример. Он отображался правильно, поэтому я открыл страницу «О программе», чтобы получить номер версии, чтобы сообщить вам. У меня был Chrome 70, но при переходе на страницу начался процесс обновления. Когда это закончилось, я перезапустил и попробовал еще раз. Итак, я могу сказать, что это работает в Chrome 70 и 71. Возможно, вы захотите убедиться, что ничто не переопределяет ваши стили. - person Neil T.; 11.12.2018