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

674

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

.check:checked ~ .content {
}

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

  • 3
    Проверьте демо, которое вы поймете Вот список селекторов CSS
  • 69
    К вашему сведению, иногда полезно указать имя персонажа, о котором идет речь. В этом случае поиск «css tilde» дал множество релевантных результатов.
Показать ещё 6 комментариев
Теги:
css-selectors

5 ответов

1060
Лучший ответ

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

Поделиться
  • 1
    «Не обязательно сразу» является ключевой частью этого описания.
  • 1
    Также есть селектор для всех элементов с одним и тем же родителем?
Показать ещё 8 комментариев
176

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

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

Подробнее

Поделиться
118

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

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

Поделиться
26

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

Поделиться
3

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

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

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню