“〜”（チルダ/波線/回転）CSSセレクターはどういう意味ですか？

~文字の検索は簡単ではありません。私はいくつかのCSSを調べていて、これを見つけました

.check:checked ~ .content {
}

どういう意味ですか？

~セレクタは、実際には一般的な兄弟コンビネータ（中その後、兄弟コンビネータに改名セレクタレベル4）：

一般的な兄弟コンビネータは、単純なセレクタの2つのシーケンスを区切る「チルダ」（U + 007E、〜）文字で構成されています。2つのシーケンスで表される要素は、ドキュメントツリーで同じ親を共有し、最初のシーケンスで表される要素は、2番目のシーケンスで表される要素の前に（必ずしもすぐにではなく）あります。

次の例を考えてみます。

.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
• .aHTMLソース順で後に表示されます。

同様に、兄弟でその後ろに表示される.check:checked ~ .contentすべての.content要素に一致します.check:checked。

家族の他のコンビネーターをチェックして、この特定のコンビネーターに戻るのも良いでしょう。

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

チェックリストの例：

• ul li- 内部を見る -の内部（どこでも）に配置されたすべてのli要素を選択しulます。子孫セレクター
• ul > li- 内部を見る - の直接の li要素のみを選択しulます。それが唯一の直接の子を選択します。すなわちliのをul。子供セレクタや子供コンビネータセレクタ
• ul + ul- 外を見る - ul直後を選択ulます。それは内側を見るのではなく、すぐ後ろの要素を外側を見る。隣接する兄弟セレクタ
• ul ~ ul- 外を見る - ulに続くすべてを選択します。ul場所は関係ありませんが、両方ulが同じ親を持つ必要があります。一般的な兄弟セレクター

ここで見ているのはGeneral Sibling Selectorです

一般的な兄弟コンビネーター

一般的な兄弟コンビネーターセレクターは、隣接する兄弟コンビネーターセレクターとよく似ています。違いは、選択される要素が最初の要素の直後に続く必要はなく、その後のどこにでも出現できることです。

より詳しい情報

これはGeneral sibling combinator、@サラマンの回答で非常によく説明されています。

私が見逃したのは、Adjacent sibling combinatorであり+、と密接に関連してい~ます。

例は

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

• 一致する要素 .b
• に隣接しています .a
• .aHTMLの後

上記の例ではli、4番目ではなく2番目をマークします。

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

JSFiddle

属性セレクター（例[attr~=value]：）では、チルドが

値が空白で区切られた単語のリストであるattrという属性名を持つ要素を表します。その1つは正確にvalueです。

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors