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

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

.check:checked ~ .content {
}

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

5 ответов


на ~ селектор на самом деле общий родственный комбинатор (переименован в комбинатор последующего брата в селекторы уровня 4):

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

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

.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 элементов
  • являются элементы .a
  • появляются после .a в исходном порядке HTML.

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


общий родственный комбинатор

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

Подробнее


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

  • 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 должен иметь одного и того же родителя;Селектор Общего Брата

мы смотрим здесь Селектор Общего Брата


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

в примере выше он будет отмечать 2nd 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


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

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

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