Css

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



What Does Css Selector Mean



この記事の翻訳元： 「〜」（チルダ/波線/ひねり）CSSセレクターはどういう意味ですか？

~を検索していますキャラクターは簡単ではありません。 検索~文字は簡単ではありません。 私はいくつかのCSSを調べていて、これを見つけました 私はいくつかのCSSをチェックし、これを見つけました

.check:checked ~ .content { }

どういう意味ですか？ どういう意味ですか？

＃1階

参照： https://stackoom.com/question/jEu6/tilde-wave-rotation-CSSセレクターはどういう意味ですか？

＃2階

一般的な兄弟コンビネータ ユニバーサル兄弟コンバイナー

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

より詳しい情報 詳しくは

＃3階

~セレクターは実際には 一般的な兄弟コンビネータ （で後続の兄弟コンビネータに名前が変更されました セレクターレベル4 ）： ~セレクターは実際には ユニバーサル兄弟コンバイナー （に セレクターレベル4 後続の兄弟グループに名前を変更します 端末 ）：

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

次の例を考えてみましょう。 次の例を考えてみましょう。

.a ~ .b { background-color: powderblue }
  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

.a ~ .b次の理由により、4番目と5番目のリスト項目に一致します。 .a ~ .b次の理由により、4番目と5番目のリストアイテムに一致します。

  • .bです要素 はい.b要素
  • .aの兄弟です はい.a兄弟姉妹
  • .aの後に表示されますHTMLソース順。 HTMLソース順に表示.aその後。

同様に、.check:checked ~ .contentすべてに一致.content .check:checkedの兄弟である要素その後に表示されます。 同様に、.check:checked ~ .content vsus .check:checked同じレベルのすべてのアイテム.content要素は一致し、その後に表示されます。

＃4階

General sibling combinatorです@Salamanの回答で非常によく説明されています。 それはGeneral sibling combinatorそして@Salamanの答えで良い説明をしました。

私が見逃したのはAdjacent sibling combinatorですこれは+です~と密接に関連しています。 私が見逃しているのは+そして~密接に関連しているAdjacent sibling combinator 。

例は 例は

.a + .b { background-color: #ff0000 }
  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th
  • .bである要素に一致します 一致.b要素
  • .aに隣接しています 対.a隣接
  • 後.a HTMLで HTMLで.aその後

上記の例では、2番目のliをマークします。しかし、4番目ではありません。 上記の例では、4番目ではなく2番目liとしてマークされます。

.a + .b { background-color: #ff0000 }
  • 1st
  • 2nd
  • 3rd
  • 4th
  • 5th

JSFiddle JSFiddle

＃5階

他のチェックも良い コンビネータ 家族の中で、そしてこの特定のものに戻るために。 家族の他の人もチェックできます コンバイン 、そしてこの特定のコンビネータに戻ります。

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

チェックリストの例： リストの例：

  • ul li - 中を見る -選択 すべて li ul内に（どこにでも）配置された要素 ul li - 中を見る -選択する すべて of li内部コンポーネントを（任意の位置に）配置しますul 子孫セレクター 子孫セレクター
  • ul > li - 中を見る -選択 直接のみ li ulの要素 ul > li 内側を見てください - のみ 選択ul 直接 li要素 つまり、直接の子のみを選択しますliのul つまり選択するのはul直子li ； チャイルドセレクター または 子コンビネータセレクタ 子セレクター または セレクターサブコンバイナー
  • ul + ul - 外を見る -ulを選択しますulの直後 ul + ul 外を見る -in ul今すぐ選択ul ； 中を見るのではなく、すぐ次の要素を外で探す それは内部を探しているのではなく、それに続く要素を探しています。 隣接する兄弟セレクター 隣人の兄弟セレクター
  • ul ~ ul - 外を見る -すべてのulを選択しますulに続くどこにあるかは関係ありませんが、両方ul同じ親を持つ必要があります ul ~ ul - 外を見る -すべて選択ul戻るulどこにあるかは関係ありませんが、両方ul同じ親ノードが必要です 一般的な兄弟セレクター ユニバーサルブラザーセレクター

ここで見ているのは 一般的な兄弟セレクター ここに表示されるのは ユニバーサルブラザーセレクター

＃6階

属性セレクター（例：[attr~=value]）では、チルダが 属性セレクター（例：[attr~=value]）でチルダに注意してください

属性名が次の要素を表します attr その値は空白で区切られた単語のリストであり、そのうちの1つは正確に 値 。 属性名が attr 値がスペースで区切られた単語のリストである要素。そのうちの1つは 値 。

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