Поиск символа ~
непросто. Я просматривал некоторые CSS и нашел это
.check:checked ~ .content {
}
Что это значит?
Поиск символа ~
непросто. Я просматривал некоторые CSS и нашел это
.check:checked ~ .content {
}
Что это значит?
Селектор ~
на самом деле является Комбинатор общих собраний (переименован в Комбинатор Последующего-сиблинга в селекторы Уровень 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>
</мкл >код>
Общий комбонайтер
Общий селектор комбинаторов sibling очень похож на соседний селектор комбинаторов sibling. Разница в том, что выбранный элемент не нуждается в немедленном преодолении первого элемента, но может появиться где-то после него.
Хорошо также проверить другие 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
должны иметь один и тот же родитель; Общий селектор для сиблингаТо, что мы смотрим здесь, - Селектор общих сиблингов
Это 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>
Обратите внимание, что в селекторе атрибута (например, [attr~=value]
) тильда
Представляет элемент с именем атрибута attr, значением которого является список слов, разделенных пробелами, одно из которых является точно значением.
https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors