css - ::と~はcssで何をしますか?

Question

私はツイッターで男が作ったコードを見ていましたが、それは次のようなものです:

div::after {
-webkit-transform: rotate(2deg);
}

div ~ div {
-webkit-transform: rotate(0deg);
}

それは何ですか？

score 24 · Accepted Answer

疑似クラスと疑似要素を明確に区別するために、CSS3 の疑似要素の単一コロンセレクターが二重コロンに置き換えられました。下位互換性のために、CSS3 より前のセレクターでは単一コロンの構文を使用できます。したがって、:after は疑似クラスで、::after は疑似要素です。

一般的な兄弟セレクターは CSS3 で使用でき、このセレクターで使用されるコンビネーターはチルダ文字 (~) です。

セレクターは、特定の要素の兄弟である要素に一致します。この例は、h2 要素の兄弟である場合に ap 要素に一致します。

score 22 · Accepted Answer

チルダ文字 (~) は兄弟セレクターです

h2 ~ p { color:red; }

たとえば、以下のコードで段落を赤くします

<h2>Heading</h2>
<p>The selector above matches this paragraph.</p>
<p>The selector above matches this paragraph.</p>

:: は疑似要素に使用され、::beforeと::after一緒に、content:たとえば、すべてのリンクの前にアイコンを配置できます

a::before { content:url(link.png); }

score 9 · Accepted Answer

は、CSS3の疑似要素::に使用されます。

はCSS3~の一般的な兄弟コンビネータで、同じレベルで別の要素に続く要素を選択するために使用されます。

3 に答える 3