web-dev-qa-db-ja.com

CSSでの記号チルダ（〜）の意味

CSSで（〜）の意味を知りたい。

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

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

csstilde
46
Monie corleone

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

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

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

example

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>の直後になければなりません

52
MarcinJuraszek

最初のセレクターに一致する要素の後に表示される場合、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>のみが太字で表示されます。あなたの例では、Visual Studioは:hover修飾子の解釈に問題があると思います。これは実際には要素ではないからです。ルールから削除すると、正しく機能する場合があります。

21
Neil T.