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要素 つまり、直接の子のみを選択しますliul つまり選択するのは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