有什么用？＆＃39;〜＆＃39; CSS中的符号？

Question

任何人都可以解释＆＃39;〜＆＃39;的用途。 CSS中的符号？

我有一个例子

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

我在这里没有使用〜符号。请帮帮我。

Answer 1

此选择器名为General Siblings Selector

请参阅Docs

  

〜combinator分隔两个选择器，只有当第一个元素以第一个元素开头时才匹配第二个元素，并且它们共享一个共同的父元素。

来自CSS Specifications：

  

跟随兄弟组合由＆＃34;代字号组成＆＃34; （U + 007E，〜）分隔两个简单选择器序列的字符。由两个序列表示的元素在文档树中共享相同的父元素，由第一个序列表示的元素在第二个序列表示的元素之前（不一定是立即）。

示例演示

＆＃13;

＆＃13;

p ~ span {
  color: red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为这会让你明白

element1~element2

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