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

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

.check:checked ~ .content {
}

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

+744
28 мая '12 в 9:10
источник поделиться
5 ответов

Селектор ~ на самом деле является Комбинатор общих собраний (переименован в Комбинатор Последующего-сиблинга в селекторы Уровень 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>
</мкл >код>

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

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

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

+1243
28 мая '12 в 9:29
источник

Связанные вопросы


Похожие вопросы

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

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

Подробнее

+170
28 мая '12 в 9:11
источник

Хорошо также проверить другие 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 должны иметь один и тот же родитель; Общий селектор для сиблинга

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

+131
16 сент. '16 в 21:46
источник

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

JSFiddle

+27
06 июл. '15 в 10:42
источник

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

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

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

+4
24 янв. '18 в 19:45
источник

Посмотрите другие вопросы по меткам или Задайте вопрос