twiddle)?

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

 .check:checked ~ .content { }

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

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

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

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

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

  1st
 2nd
 3rd
 4th
 5th

Общий синонимы

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

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

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

ul li
ul > li
ul + ul
ul ~ ul

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

ul li – Заглядывание внутрь – выбор всех элементов li расположенных (в любом месте) внутри ul ; Селектор потомков
ul > li – Просмотр внутри – выбирает только прямые li элементы ul ; т.е. он будет выбирать только прямых детей li ul ; Селектор «Выбор ребенка» или « Детский комбинатор»
ul + ul – Внешний вид – выбор ul сразу после ul ; Он не заглядывает внутрь, но смотрит снаружи на следующий следующий элемент; Смежный селектор
ul ~ ul – Внешний вид – выбор всей ul которая следует за ul не имеет значения, где она, но обе ul должны иметь один и тот же родитель; Общий селектор

Тот, на который мы смотрим, – это General Sibling Selector

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

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

пример будет

 .a + .b { background-color: #ff0000; }  1st
 2nd
 3rd
 4th
 5th

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

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

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

  1st
 2nd
 3rd
 4th
 5th

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

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

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

Эффект CSS3 Marquee

Скользящая стрелка CSS

т. е. пограничный радиус

Чистая замена CSS-кода

Каковы правила совпадения запросов медиа-запросов CSS?

Как нарисовать круг в CSS?

text-overflow: многоточие не работает на IE

Границы gradleиента CSS3

Как предотвратить изменение текста текста Webkit во время перехода CSS

Предполагается, что селектор CSS: not () должен работать с отдаленными потомками?

что быстрее? Переходы CSS3 или анимация jQuery?