在CSS中“~”符号有什么用途？[副本]

Question

有人能解释一下CSS中“~”符号的用法吗？

我举了一个例子

.myclass label: hover ~ label: before {
    opacity: 0.5;
}

我在这里没有得到~符号的用法。请帮帮我。

Answer 1

我想这会让你明白的

element1~element2

p ~ ul  Selects every <ul> element that are preceded by a <p> element

Answer 2

此选择器称为通用选择器

见文件

~组合器分隔两个选择器，只有当第二个元素前面有第一个元素时才匹配第二个元素，并且两个元素共享一个公共父元素。

来自CSS规范：

以下同级组合符由“tilde”（U 007E，~）字符组成，该字符分隔两个简单选择器序列。两个序列表示的元素在文档树中共享同一父元素，第一个序列表示的元素在第二个序列表示的元素之前（不一定立即）。

示例演示

p ~ span {
  color: red;
}

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>