Вопрос по css-selectors, css, css3 – Что означает CSS-селектор «~» (тильда / косоглазие / тиддл)?

725

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

.check:checked ~ .content {
}

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

Я даже не знал, что это называется тильда, это просто загогулины Akshat
Ищет"css squiggle selector" тоже работает;) Shawn Chin
Чтобы найти имя символа, вы часто можете скопировать его из браузера и вставить в поиск по Википедии. Используйте соответствующий языковой сайт Википедии. Kelvin
Проверитьdemo ты поймешьHere список селекторов CSS Dipak
К вашему сведению, иногда полезно указать имя персонажа, о котором идет речь. В этом случае поиск"css tilde" дал много соответствующих результатов. Shawn Chin

Ваш Ответ

5   ответов
170

General sibling combinator

The general sibling combinator selector is very similar to the adjacent sibling combinator selector. The difference is that the element being selected doesn't need to immediately succeed the first element, but can appear anywhere after it.

Больше информации

1212

~ селектор на самом делеГенеральный брат и сестра комбинатор (переименован в Последовательный братский комбинатор вСелекторы Уровень 4):

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

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

.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 elements
  • Are siblings of .a
  • Appear after .a in HTML source order.

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

Error: User Rate Limit Exceeded.parent > *?
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
27

это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>
  • Matches elements that are .b
  • Are adjacent to .a
  • After .a in 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

130

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

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

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

  • ul li - Looking inside - Selects all the li elements placed (anywhere) inside the ul; Descendant selector
  • ul > li - Looking inside - Selects only the direct li elements of ul; i.e. it will only select direct children li of ul; Child Selector or Child combinator selector
  • ul + ul - Looking outside - Selects the ul immediately following the ul; It is not looking inside, but looking outside for the immediately following element; Adjacent Sibling Selector
  • ul ~ ul - Looking outside - Selects all the ul which follows the ul doesn't matter where it is, but both ul should be having the same parent; General Sibling Selector

То, на что мы смотрим здесь,General Sibling Selector

4

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

Represents an element with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

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

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