兄弟コンビネータを使用して疑似要素を非表示にできないのはなぜですか?また、これを実現するにはどうすればよいですか?

兄弟コンビネータを使用して疑似要素をターゲットにする

特定のアンカー タグの後に生成された疑似要素を隠しながら、それらのラッピング画像を回避するために、次の CSS が実装されました。 :

a[href^="http"]:after {
    /* Styling for the pseudo-element */
}

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

ただし、このアプローチは次の点で失敗しました。 HTML:

<a href="http://google.com">Test</a>
<a href="http://google.com">
    <img src="https://www.google.com/logos/classicplus.png">
</a>

この試行はなぜ失敗しますか?

回答:

兄弟コンビネータを使用した疑似要素 (:after) をターゲットにしています(|) は、疑似要素のコンテンツが DOM にレンダリングされず、操作されないため、使用できません。 それ。したがって、CSS は兄弟画像の存在に基づいて疑似要素を非表示にするように DOM を変更することはできません。 CSS2 仕様に記載されているように:

「生成されたコンテンツはドキュメント ツリーを変更しません。」

この問題を解決するには、JavaScript を使用して、兄弟画像の存在

以上が兄弟コンビネータを使用して疑似要素を非表示にできないのはなぜですか?また、これを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。