“~”（波浪线/波浪线/旋转）CSS 选择器是什么意思？

Question

搜索 ~ 字符并不容易。我正在查看一些 CSS 并发现了这个

.check:checked ~ .content {
}

这是什么意思？

原文由 Tarang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

~ 选择器实际上是 后续兄弟组合 器（以前称为通用兄弟组合器 ，直到 2017 年）：

随后的兄弟组合符由分隔两个简单选择器序列的“波浪号”（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
• 在 HTML 源代码顺序中出现在 .a 之后。

同样， .check:checked ~ .content 匹配所有 .content 元素是 .check:checked 的兄弟元素并出现在它之后。

原文由 Salman A 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

还可以检查系列中的其他 组合 器并回到这个特定的组合器。

• ul li
• ul > li
• ul + ul
• ul ~ ul

清单示例：

• ul li - 向内看- 选择放置在（任何地方） ul 中的 所有 li 元素； 后代组合器
• ul > li - 向内看- 仅选择 --- 的直接 li ul ；即它只会选择直接孩子 li ul ; 子组合器
• ul + ul - 向外看- 选择 ul 紧跟 在 ul 之后；它不是向内看，而是向外看紧随其后的元素； 相邻兄弟组合 器/ 下一个兄弟组合器
• ul ~ ul - 向外看- 选择 以下所有 ul 的，但两个 ul 的应该有相同的父级； 一般兄弟组合 器/ 后续兄弟组合器

---

我们在这里看到的是 通用兄弟组合 器/ 后续兄弟组合器

原文由 L J 发布，翻译遵循 CC BY-SA 4.0 许可协议