提问者:小点点

CSS选择器的“~”是什么意思?


搜索~字符并不容易。我在看CSS的时候发现了这个

.check:checked ~ .content {
}

这是什么意思?


共1个答案

匿名用户

~选择器实际上是一般的同级组合器(在选择器级别4中重命名为后续同级组合器):

一般的兄弟组合子由“颚化符”(u+007e,~)字符组成,该字符分隔两个简单选择符序列。由两个序列表示的元素在文档树中共享相同的父元素,并且由第一个序列表示的元素先于(不一定立即)由第二个序列表示的元素。

请考虑以下示例:

null

.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>