39

このCSSが機能しない理由はありますか？

http://jsfiddle.net/6v5BZ/

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="https://www.google.com/logos/classicplus.png">
</a>

アイデアは、一致するアンカータグに疑似要素を持たせることです。ただし、画像をラップするアンカータグには適用したくありません。また、のようなものを使用してアンカーをターゲットにすることはできないためa < img、兄弟である画像を見つけることで、：after疑似要素をターゲットにできる可能性があると考えました。

任意の洞察をいただければ幸いです。

4

2 に答える 2

25

コンテンツがDOMでレンダリングされず、操作されないため、：afterをターゲットにすることはできません。これを機能させるには、DOMを再レンダリングする必要があり、CSSはこのように操作できません。

詳細な理解については、仕様を確認してください：http ://www.w3.org/TR/CSS2/generate.html#propdef-content

生成されたコンテンツはドキュメントツリーを変更しません。特に、それはドキュメント言語プロセッサにフィードバックされません（例えば、再解析のために）。

JavaScriptを使用して作業を行うことをお勧めします。

于 2011-10-12T08:42:57.760 に答える
19

コンビネータを使用して、生成要素以外の要素に関連する疑似要素をターゲットにすることはできません。

これは、それらが実際の要素ではなく疑似要素であり、コンビネータが実際の要素間の関係を確立することによってのみ機能するためです。一方、疑似要素は、セレクター（右端の複合セレクター）のサブジェクトにのみ適用できます。これは、実際の要素でマッチングが処理された後にのみ発生します。つまり、最初に疑似要素が存在しないかのように照合が行われ、次に疑似要素がセレクター内に示されている場合は、各照合に適用されます。

コードでは、次のセレクター：

a[href^="http"] img ~ :after

両方が要素の子としてレンダリングされるため、そのように表示されますが、実際には、内の:after後に続く疑似要素を検索しません。imgaa

次のように書き直すことができます。

a[href^="http"] img ~ *:after

*暗黙のセレクターに注意してください。*暗示される他の単純なセレクターの前に省略できる方法と同様に*、疑似要素から省略すると、そこにあることが暗示されます。詳細については、仕様を参照してください。

さて、それ*:afterはまだ一致するはずですがa:after（一致するのでa）*、それでもそのようには機能しません。:afterセレクターから疑似要素を削除した場合：

a[href^="http"] img ~ *

セレクターの意味が完全に変わることに気付くでしょう。

の子孫である（「http」で始まる）
の次の兄弟として表示される要素を選択します。img
ahref

imgはHTMLの要素の最後の子であるためa、一致する後続の兄弟がないため、:after疑似要素を生成できません。

:beforeまたは疑似要素の場合:after、疑似要素の「兄弟」に対して疑似要素の生成要素を一致させることを考えるかもしれませんが、OPが正しく指摘しているように、親セレクターがないため、運が悪かった。

于 2011-10-13T02:38:27.307 に答える