兄弟コンビネータは CSS の :before または :after 疑似要素を選択できますか?

兄弟コンビネータは :before または :after 疑似要素をターゲットにできますか?

CSS では、兄弟コンビネータは、次の要素にスタイルを適用するために使用されます。同じ親を共有しますが、相互にネストしません。ただし、これらのコンビネータは、:before や :after などの疑似要素をターゲットにするために使用できますか?

課題

次の CSS と HTML を検討してください。 code:

CSS:

a[href^="http"]:after {
    content:"";
    width:10px;
    height:10px;
    display:inline-block;
    background-color:red;
}

a[href^="http"] img ~ :after {
    display:none;
}

HTML:

<a href="http://google.com">Test</a>
<a href="http://google.com">
    <img  src="/static/imghwm/default1.png" data-src="https://www.google.com/logos/classicplus.png" class="lazy" alt="兄弟コンビネータは CSS の :before または :after 疑似要素を選択できますか?" >
</a>

意図

この CSS は、 「http」で始まるアンカーには赤いマーカーが追加されますが、画像を含むアンカーにはマーカーを追加しないでください。 img 要素を使用してアンカー タグを直接ターゲットにすることはできないため、兄弟コンビネータは、イメージの兄弟を持つアンカー タグの :after 疑似要素をターゲットにすることができると仮定されます。

問題

ただし、この CSS は意図したとおりに機能しません。疑似要素は、画像を含むアンカーでは非表示になりません。

説明

この動作の理由は、疑似要素の性質にあります。疑似要素は DOM ツリーの一部ではなく、ブラウザによって生成されます。その結果、兄弟コンビネータはそれらを直接ターゲットにすることができません。

CSS 仕様では、「生成されたコンテンツはドキュメント ツリーを変更しません。特に、ドキュメント言語プロセッサ (再解析など) にフィードバックされません」と述べられています。 )."

解決策

望ましい効果を達成するには、 JavaScript を使用する必要があります。スクリプトはアンカー タグを反復処理し、画像コンテンツに基づいて目的のスタイルを追加または削除できます。

以上が兄弟コンビネータは CSS の :before または :after 疑似要素を選択できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。