1

この例の '~' はどういう意味ですか? このチュートリアルからこの例を見ました。http://css-tricks.com/the-checkbox-hack/

そのチェックボックスの状態に応じて、要素のスタイルをまったく異なるものにするために使用できることを私は知っています。しかし、'~' について説明している CSS ドキュメントが見つかりません。

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
   /* For mobile, it's typically better to position checkbox on top of clickable
      area and turn opacity to 0 instead. */
}

/* Default State */
div {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ div {
   background: red;
}
4

3 に答える 3

3

兄弟要素のセレクターです。そこにあるものは、チェックされたチェックボックスのすべての「div」兄弟を同じ親内に見つけますが、dom のチェックボックスに続くものだけを見つけます。チェックボックスの前にある「Div」兄弟は含まれません。

チルダを含む素晴らしいセレクターのリファレンス: http://learn.shayhowe.com/advanced-html-css/complex-selectors

于 2013-01-17T21:13:02.573 に答える
3

これは一般的な兄弟コンビネータであり、隣接兄弟コンビネータ (+) に似ています。違いは、2 番目のセレクターが最初のセレクターの直後に続く必要がないことです。つまり、前のセレクターの前にあるすべての要素が選択されます。

于 2013-01-17T23:09:28.247 に答える
2

http://www.w3.org/TR/selectors/#general-sibling-combinators

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

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

例：

h1 ~ pre
は、h1 に続く pre 要素を表します。これは正しく有効な、しかし部分的な説明です:

<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>
于 2013-01-17T21:34:16.320 に答える