“〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？

  • Z时代
  • 2024-01-10
  • 分类：问答

搜索~角色并不容易。我查看了一些CSS，发现了这个

.check:checked ~ .content {
}

这是什么意思？

回答：

该~选择器实际上是[通用同级组合器（在选择器级别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并在其后出现的所有元素。

以上是 “〜”（波浪号/波浪形/旋转）CSS选择器是什么意思？ 的全部内容， 来源链接： utcz.com/qa/417154.html

回到顶部