什么是“〜” （波浪号/ squiggle / twiddle）CSS选择器的意思？ [英] What does the "~" (tilde/squiggle/twiddle) CSS selector mean?

问题描述

搜索〜字符并不容易。我在查找一些CSS，发现这个

  .check：checked〜.content {
} 
 
解决方案
 div> 
 〜选择器实际上是一般兄弟组合器：
 
 
一般兄弟组合器由波浪号 + 007E，〜）
分隔两个简单选择器序列的字符。由两个序列表示的
元素在
文档树中共享相同的父元素，并且由第一序列表示的元素
在由
表示的元素之前（不一定立即）第二个。
 
 
请考虑以下示例：
 
 
 
 
 
 
  .a〜.b {background-color：powderblue;}  
 
 < ul> < li class =b>第1< / li> < li class =a>第二< / li> < li>第3< / li> < li class =b>第4< / li> < li class =b>第五< / li>< / ul>  
 
 
 
 
 
 
  .a〜.b 匹配第4和第5列表项，因为它们：
 
 
 
 
 
是 .b 元素
 
 
是 .a  
 
 
在HTML源订单中 .a 后出现。
 
 
 
 
 
同样， .check：checked〜.content 匹配所有 .content 是 .check：checked 的兄弟姐妹，并出现在其后面。
 
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:

  
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>





.a ~ .b matches the 4th and 5th list item because they:


Are .b elements  
Are siblings of .a
Appear after .a in HTML source order.


Likewise, .check:checked ~ .content matches all .content elements that are siblings of .check:checked and appear after it.

                        
这篇关于什么是“〜” （波浪号/ squiggle / twiddle）CSS选择器的意思？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！