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

858

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

.check:checked ~ .content {
}

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

css css-selectors

— Akshat
источник

3

Проверьте демонстрацию, которую вы поймете Вот список селекторов CSS

— Dipak

@TylerH, это что-то очень распространенное в постах переполнения стека, пожалуйста, успокойтесь, я не собирался делать это хуже.

— Арсен Хачатурян

@ArsenKhachaturyan Может быть, вы неправильно поняли; Синтаксис блочной цитаты предназначен для указания цитаты , когда пользователь указывает, что что-то (текст, изображение, код и т. д.) не является его собственной работой или словами, а копируется откуда-то еще. Как и любое форматирование, оно имеет семантическое назначение; это не то, что нужно добавлять волей-неволей. Точно так же, пожалуйста, не добавляйте случайное выделение жирным шрифтом в слова. Это следует использовать для акцента, экономно.

— TylerH

@TylerH Я понимаю, что это имя "цитата", а также то, что означает сама "цитата". Однако иногда, когда вы действительно хотите отличить вопросы от обычного текста, вы можете попробовать некоторые техники выделения, как я. Для жирного шрифта также очевидно использовать, когда вы хотите выделить вещи, такие как ключевые слова или хорошо известные термины. Мне обычно не нравится, когда люди используют жирный шрифт по неизвестным причинам, но иногда его можно использовать, чтобы люди могли легко найти информацию, связанную с темой.

— Арсен Хачатурян

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

— Meagar

1372

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

— Салман А
источник

13

«Не обязательно сразу» является ключевой частью этого описания.

— PanicBus

1

Также есть селектор для всех элементов с одним и тем же родителем?

— Ник Н.

1

@NickN. ты имеешь ввиду .parent > *?

— Салман А

@SalmanA не совсем, я надеялся, что есть селектор, который вы можете использовать, если вы не знаете родителя.

— Ник Н.

8

@ NickN. Нет, нет. CSS сделан с предположением, что парсер CSS никогда не оглядывается назад в DOM, чтобы найти соответствие. Это та же самая причина, по которой нет родительского селектора.

— yunzen

192

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

ul li
ul > li
ul + ul
ul ~ ul

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

ul li- Глядя внутри - Выбирает все эти liэлементы размещены ( в любом месте) внутри ul; Потомок селектор
ul > li- заглядывая внутрь - отбирает только прямые li элементы ul; т.е. он будет выбирать только прямые ребенок liиз ul; Child Selector или Child combinator селектор
ul + ul- смотреть снаружи - выбирает ulсразу после ul; Он не смотрит внутрь, а ищет снаружи сразу следующий элемент; Смежный Родной Селектор
ul ~ ul- Взгляд снаружи - выбирает все, ulчто следует ul, независимо от того, где он находится, но оба ulдолжны иметь одного и того же родителя; Главный Выбор Родного брата

То, на что мы смотрим, это General Sibling Selector

— Лихо Джозеф
источник

2

Это имело смысл больше всего. Терминология Леймана снова на помощь. Теперь я могу читать техническую документацию.

— TheRealChx101

2

Существует ли селектор брата для ВСЕХ братьев и сестер, а не только для тех, которые следуют?

— Илия Мок

1

@ EliTheHuman, нет. Пожалуйста, обратитесь к этому SO сообщению для более подробной информации - stackoverflow.com/a/11813469/6830901

— Lijo Joseph

174

Генеральный брат и сестра комбинатор

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

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

— Рохит Азад
источник

31

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

— Матас Вайткявичюс
источник

7

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

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

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

— Ян Хантер
источник