什么是~&引用；（波浪/蠕动/旋转）CSS选择器是什么意思？

搜索

~

字符并不容易。我查看了一些CSS，发现了这个

.check:checked ~ .content {
}

---

它是什么意思？

一般兄弟组合器

一般同级组合选择器与相邻同级组合选择器非常相似。不同之处在于，被选择的元素不需要立即继承第一个元素，但可以出现在第一个元素之后的任何位置

---

选择器实际上是（在中重命名为后续同级组合器）：

一般同级组合器由“tilde”（U+007E，~）组成 分隔两个简单选择器序列的字符。这个 由两个序列表示的元素在 文档树和由第一个序列表示的元素 在由 第二个

考虑以下示例：

.a~.b{
背景色：粉蓝色；
}

第一
第二名
第三
第四
第五

它是

一般兄弟组合词

，在@Salaman的回答中解释得很好

我错过的是

相邻兄弟组合符

，它是

+

，与

~

密切相关

例如

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

第一
第二
第三
第四
第五

检查家庭中的另一个成员并返回到这个特定的成员

• ulli

• ul>li

• ul+ul

• ul~ul

清单示例：

• ul-li

  -查看内部-选择所有放置在

  ul

  内部（任何位置）的

  li

  元素后代选择器

• ul>li

  -查看内部-仅选择

  ul

  的直接

  li

  元素；i、 e.它将只选择

  ul

  的直接子项

  li

  子选择器或子组合选择器

• ul+ul

  -向外看-选择紧跟在

  ul

  之后的

  ul

  ；它不是在看内部，而是在看外部，寻找紧跟其后的元素相邻同级选择器

• ul~ul

  -向外看-选择

  ul

  后面的所有

  ul

  ，不管它在哪里，但两者都应该具有相同的父级一般同级选择器

---

---

我们在这里看到的是通用同级选择器

请注意，在属性选择器中（例如，

[attr~=value]

），波浪线

表示属性名为attr的元素，其值是以空格分隔的单词列表，其中一个单词正好是value

---

检查您将了解的是CSS列表selectors@TylerH，这是在堆栈溢出帖子中非常常用的东西，请放轻松，我不是故意让它感觉更糟的。@ArsenKhachaturyan也许你误解了；块引号语法用于指示引号，即当用户指示某些东西（文本、图像、代码等）不是他们自己的作品或文字，而是从其他地方复制的时候。与所有格式一样，它也有语义目的；这不是随便加上去的。同样，请不要在单词中添加随机粗体突出显示。它应该用于强调，但要谨慎。@TylerH我知道它的名字是“quote”，也是“quote”本身的意思。然而，当你真的想把问题和普通文本区分开来的时候，你可以像我一样尝试一些强调技巧。对于粗体字来说，当你想强调一些东西，比如关键词或众所周知的术语时，使用粗体字也很明显。我通常不喜欢人们出于未知原因使用粗体字，但有时它可以让人们轻松找到与主题相关的信息。@ArsenKhachaturyan请不要这样做<代码>>仅供引用，不得用于任何其他目的。在这个问题上，你也不应该用粗体字来称呼随机技术。我们可以通过标签看到哪些技术是相关的。“不一定立即”是这个描述的关键部分。是否也有一个选择器用于所有具有相同父元素的元素？@NickN。你的意思是

.parent>*

？@NickN。不，没有。CSS的提出是基于这样一个假设，即CSS解析器永远不会回过头来在DOM中进行匹配。这与没有父选择器的原因相同。因此，简单地说，

.a~.b

表示下一个.b兄弟姐妹。aIs的所有兄弟姐妹都有兄弟姐妹选择器，而不仅仅是后面的兄弟姐妹？@EliTheHuman，没有。请参阅本So帖子了解更多详细信息-