it-swarm.com.ru

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

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

.check:checked ~ .content {
}

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

759
Akshat

Селектор ~ на самом деле --- Общий братский комбинатор (переименован в Последующий братский комбинатор в селекторы уровня 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-му элементам списка, потому что они:

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

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

1258
Salman A

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

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

Подробнее

170
Rohit Azad

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

  • 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

139
Lijo Joseph

Это 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, но не 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

27
Matas Vaitkevicius

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

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

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

5
Ian Hunter