Вопрос по css-selectors, css, css3 – Что означает CSS-селектор «~» (тильда / косоглазие / тиддл)?

General sibling combinator

The general sibling combinator selector is very similar to the adjacent sibling combinator selector. The difference is that the element being selected doesn't need to immediately succeed the first element, but can appear anywhere after it.

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

~ селектор на самом делеГенеральный брат и сестра комбинатор (переименован в Последовательный братский комбинатор вСелекторы Уровень 4):

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

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

.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-му пунктам списка, потому что они:

• Are .b elements
• Are siblings of .a
• Appear after .a in HTML source order.

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

это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>

• Matches elements that are .b
• Are adjacent to .a
• After .a in 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

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

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

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

• ul li - Looking inside - Selects all the li elements placed (anywhere) inside the ul; Descendant selector
• ul > li - Looking inside - Selects only the direct li elements of ul; i.e. it will only select direct children li of ul; Child Selector or Child combinator selector
• ul + ul - Looking outside - Selects the ul immediately following the ul; It is not looking inside, but looking outside for the immediately following element; Adjacent Sibling Selector
• ul ~ ul - Looking outside - Selects all the ul which follows the ul doesn't matter where it is, but both ul should be having the same parent; General Sibling Selector

То, на что мы смотрим здесь,General Sibling Selector

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

Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

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