Что означает символ тильда (~) в CSS
Описание проблемы
Я столкнулся с проблемой в CSS, когда пытаюсь понять, что означает селектор ~ (тильда/волнистая линия) в следующем примере:
#img1:hover ~ #img2 {
opacity: 0;
}
При использовании этого селектора в Visual Studio я получаю ошибку 'неожиданная последовательность символов'. Можете ли вы объяснить, что именно делает этот селектор и как правильно его использовать? Также интересно, почему возникает указанная ошибка.
Заранее спасибо за помощь!
2 ответ(ов)
8.3.2. Комбиниратор общих соседей
Комбиниратор общих соседей обозначается символом "тильда" (U+007E, ~), который разделяет две последовательности простых селекторов. Элементы, представляемые этими двумя последовательностями, имеют одного и того же родителя в дереве документа, и элемент, представленный первой последовательностью, предшествует (не обязательно мгновенно) элементу, представленному второй последовательностью.
Пример
h1 ~ pre
сопоставляется с <pre> вот здесь:
<h1>Определение функции a</h1>
<p>Функция a(x) должна применяться ко всем фигурам в таблице.</p>
<pre>function a(x) = 12x/13.5</pre>
Также существует селектор + для комбинирования соседей, находящихся рядом: с h1 + pre тег <pre> должен находиться сразу после <h1>.
Селектор, который вы используете, применяет стиль ко всем элементам, соответствующим второму селектору, если они идут после элементов, соответствующих первому селектору. Например, в представленном HTML и CSS:
hr ~ p {
font-weight: bold;
}
<p>Строка один</p>
<hr />
<p>Строка два</p>
<p>Строка три</p>
только <p>Строка два</p> и <p>Строка три</p> будут отображаться полужирным шрифтом. Что касается вашего примера, то, вероятно, Visual Studio имеет проблемы с интерпретацией модификатора :hover, так как это не является настоящим элементом. Если вы уберете его из правила, функциональность может восстановиться.
Как расположить div внизу своего контейнера?
Перенос строки в HTML с использованием '\n'
Медиа-запросы: Как нацелиться на десктоп, планшет и мобильные устройства?
Как сделать перенос строки с помощью CSS, не используя <br />?
Как адаптировать ширину flex-элемента к содержимому?