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

兄弟コンビネータと疑似要素: ターゲットの制限

兄弟コンビネータを使用して疑似要素をターゲットにできますか?最近の CSS の問題がこの質問のきっかけとなりました。

このシナリオでは、先行画像を持つアンカー タグは疑似要素を表示すべきではありません。画像が存在するため、アンカーを直接ターゲットにすることは不可能です。したがって、以下に示すように、擬似要素で兄弟コンビネータを使用する代替アプローチが試みられました。

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

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

ただし、アンカー タグが画像を囲んでいる場合、CSS は擬似要素を非表示にできません。なぜそうなるのでしょうか?

制限は擬似要素の性質にあります。生成されたコンテンツ (擬似要素を含む) は DOM には含まれず、元のドキュメントには影響しません。これは CSS 仕様で明示的に述べられています:

「生成されたコンテンツはドキュメント ツリーを変更しません。特に、コンテンツはドキュメント言語プロセッサ (再解析など) にフィードバックされません。」

結果として、兄弟コンビネータは、:before または :after 疑似要素をターゲットにすることはできません。これらは DOM の一部ではないためです。

同様のシナリオでは、JavaScript を使用して DOM を動的に操作し、必要なスタイル効果を実現することを検討してください。

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