Что такое ~ для 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

а ~ Ъ

Выбирает каждый элемент «B», который предшествует «а» элемент

Answer 3

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

Пример:

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

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

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

function a(x) = 
12x/13.5

W3C Селектор Ссылка: http://www.w3.org/TR/selectors/

Answer 4

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

Если вы видите смежный селектор a + b стиль будет соответствовать как только b приходит сразу после a

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

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