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

兄弟コンビネータと疑似要素

この CSS の難題では、疑似要素をターゲットにできるかどうかという問題に遭遇します。具体的には、兄弟を使用した :before または :after combinator.

次の 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="兄弟コンビネータは、:before または :after のような疑似要素をターゲットにできますか?" >
</a>

目的は、一致するすべてのアンカー タグに疑似要素を適用することです。ただし、画像を含むものは除きます。ただし、CSS は期待どおりに機能しません。

答えは擬似要素の性質にあります。 CSS 仕様によれば、疑似要素から生成されたコンテンツは DOM 構造に影響を与えません。これは、DOM ツリー内に存在する要素に依存する兄弟コンビネータが疑似要素をターゲットにできないことを意味します。

言い換えれば、CSS は、共有するアンカー タグの :after 疑似要素を非表示にしようとしています。イメージを持つ親。ただし、:after 疑似要素は DOM にレンダリングされないため、兄弟コンビネータがそれを見つけることは不可能です。

その結果、多くの場合、JavaScript は、その要素に基づいて要素をターゲットにするためのより適切なソリューションになります。 DOM 内の他の要素との関係。

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