1024

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

.check:checked ~ .content {
}

どういう意味ですか？

4

5 に答える 5

1543

~セレクターは、実際には一般的な兄弟コンビネーターです(セレクター レベル 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

于 2012-05-28T09:29:20.363 に答える
267

ファミリ内の他のコンビネータもチェックして、この特定のコンビネータが何であるかに戻ることをお勧めします。

  • 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です。

于 2016-09-16T21:46:36.333 に答える
181

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

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

より詳しい情報

于 2012-05-28T09:11:54.367 に答える
37

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

私が逃したのは、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の後

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

   .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

于 2015-07-06T10:42:55.813 に答える