Что означает селектор CSS ~ (tilde/squiggle/twiddle)?

Ответ 1

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

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

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

 .a ~.b {
 background-color: powderblue;
}Код>

  <ul>
 < li class= "b" > 1-й </li>
 < li class= "a" > 2-й </li>
 < & Li GT; третий </& Li GT;
 < li class= "b" > 4-й </li>
 < li class= "b" > 5-й </li>
</мкл >код>

Ответ 2

Общий комбонайтер

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

Подробнее

Ответ 3

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

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

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

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

То, что мы смотрим здесь, - Селектор общих сиблингов

Ответ 4

Это 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, но не четвертым.

   .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>

Ответ 5

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

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

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