52

css で (~) が何を意味するのか知りたいです。

#img1:hover ~ #img2 {
    opacity: 0;
}

Visual Studio で、このシンボルを使用すると「予期しない文字シーケンス」エラーが発生します。CSSでのこれの実際の意味は何ですか。それは何をするためのものか？

4

2 に答える 2

60

http://www.w3.org/TR/selectors/

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

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

例

h1 ~ pre

ここに一致し<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>

+隣接する兄弟コンビネータ用のセレクタもあります。タグを使用するとh1 + pre、<pre>直後にする必要があります<h1>

于 2013-03-18T07:08:49.140 に答える
27

最初のセレクターに一致する要素の後に出現する場合、2 番目のセレクターに一致するすべての要素にスタイルを適用します。たとえば、HTML スニペットと CSS ルールがあるとします。

hr ~ p {
    font-weight: bold;
}
<p>Line one</p>
<hr />
<p>Line two</p>
<p>Line three</p>

だけ<p>Line two</p>で、<p>Line three</p>太字で表示されます。:hoverあなたの例では、実際には要素ではないため、Visual Studio は修飾子の解釈に問題があると思います。ルールから削除すると、正しく機能する場合があります。

于 2013-03-18T07:13:55.160 に答える