Что означает CSS-селектор «~» (тильда / косоглазие / тиддл)?

Поиск ~персонажа не прост. Я просматривал некоторые CSS и нашел это

.check:checked ~ .content {
}

Что это значит?

~Селектор фактически General родственный комбинатор (переименован в Последующий-родственного комбинатора в селекторов Уровень 4 ):

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

Рассмотрим следующий пример:

.a ~ .b {
  background-color: powderblue;
}

<ul>
  <li class="b">1st</li>
  <li class="a">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="b">5th</li>
</ul>

.a ~ .b соответствует 4-му и 5-му пунктам списка, потому что они:

• Являются ли .bэлементы
• Братья и сестры .a
• Появляются после .aв исходном порядке HTML.

Аналогично, .check:checked ~ .contentсоответствует всем .contentэлементам, которые являются родственными элементами .check:checkedи появляются после него.

Хорошо также проверить других комбинаторов в семье и вернуться к тому, что это конкретно.

• ul li
• ul > li
• ul + ul
• ul ~ ul

Пример контрольного списка:

• ul li- Глядя внутри - Выбирает все эти liэлементы размещены ( в любом месте) внутри ul; Потомок селектор
• ul > li- заглядывая внутрь - отбирает только прямые li элементы ul; т.е. он будет выбирать только прямые ребенок liиз ul; Child Selector или Child combinator селектор
• ul + ul- смотреть снаружи - выбирает ulсразу после ul; Он не смотрит внутрь, а ищет снаружи сразу следующий элемент; Смежный Родной Селектор
• ul ~ ul- Взгляд снаружи - выбирает все, ulчто следует ul, независимо от того, где он находится, но оба ulдолжны иметь одного и того же родителя; Главный Выбор Родного брата

То, на что мы смотрим, это General Sibling Selector

Генеральный брат и сестра комбинатор

Общий селектор комбинатора родного брата очень похож на селектор комбинатора соседнего брата. Разница в том, что выбранный элемент не должен сразу следовать за первым элементом, но может появиться в любом месте после него.

Больше информации

Это General sibling combinatorи объясняется в ответе @ Salaman очень хорошо.

Что я пропустил, так это то, с Adjacent sibling combinatorчем +тесно связано ~.

пример будет

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

• Соответствует элементам, которые .b
• Являются смежными с .a
• После .aв HTML

В приведенном выше примере он будет отмечен как 2-й, liно не 4-й.

   .a + .b {
     background-color: #ff0000;
   }

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

JSFiddle

Обратите внимание, что в селекторе атрибута (например, [attr~=value]), тильда

Представляет элемент с именем атрибута attr , значением которого является список слов, разделенных пробелами, одно из которых является точно значением .

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors