Что такое ~ для CSS

Question

Я хочу знать, для чего используется ~ в CSS.

например

#confirmPage:target ~ #navigation #confirm-link,

Answer 1

Это означает «общий брат».Селектор:

a ~ b

соответствует каждому элементу, соответствующему b, который следует после элемента, соответствующего a, в том же родительском элементе.Например, возьмем такую ​​структуру:

<p>
    <span>Span 1</span>
    <strong>Strong emphasis</strong>
    <span>Span 2</span>
</p>

Селектор p span ~ span будет соответствовать второму <span>.

Answer 2

Тильда (~) используется для косвенного смежного комбинатора как часть селектора. Это часть CSS Sibling Combinator. ^{[документы здесь]}

Если вы видите соседний селектор a + b, стиль будет соответствовать, когда b появится сразу после a

Но a ~ b обобщает выбор, так что b может прийти в любую позицию после a.

<code>Example:

h1 ~ pre

represents a pre element following an h1. It is a correct and valid, but partial, description of:

<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

Answer 3

Селектор «E ~ F» будет соответствовать каждому элементу F, которому предшествует элемент E. Поэтому элементы E и F должны находиться на одном и том же уровне дерева, а E должно быть где-то раньше.

Пример:

h1 ~ pre представляет элемент pre, следующий за h1. Это правильно и действительное, но частичное описание:

Определение функции a

Функция a (x) должна быть применяется ко всем фигурам в таблице.

function a(x) =
12x/13.5

Справочник по выбору W3C: http://www.w3.org/TR/selectors/

Answer 4

a ~ b

Выбирает каждый элемент 'b', которому предшествует элемент 'a'