What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
Searching for the ~ character isn't easy. I was looking over some CSS and found this
.check:checked ~ .content {
}
What does it mean?
The ~ selector is in fact the General sibling combinator (renamed to Subsequent-sibling combinator in selectors Level 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.
Consider the following example:
.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>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.
More info
Good to also check the other combinators in the family and to get back to what is this specific one.
ul li ul > li ul + ul ul ~ ul Example checklist:
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 ; ie 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 The one we are looking at here is General Sibling Selector
链接地址: http://www.djcxy.com/p/22848.html上一篇: 什么是“>”（更大