Warum kann ich ein Pseudoelement nicht mit Geschwisterkombinatoren verbergen und wie kann ich das erreichen?

Targeting von Pseudo-Elementen mit Geschwisterkombinatoren

Um ein nach bestimmten Anker-Tags generiertes Pseudo-Element zu verbergen, aber diese umschließenden Bilder zu vermeiden, wurde das folgende CSS implementiert :

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

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

Dieser Ansatz schlug jedoch bei folgendem HTML fehl:

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

Warum Schlägt dieser Versuch fehl?

Antwort:

Das Targeting eines Pseudoelements (:after) mit einem Geschwisterkombinator (|) ist aufgrund des Inhalts des Pseudoelements nicht möglich wird nicht im DOM gerendert und manipuliert es nicht. Daher kann CSS das DOM nicht so ändern, dass das Pseudoelement basierend auf dem Vorhandensein eines Geschwisterbilds ausgeblendet wird. Wie in der CSS2-Spezifikation angegeben:

„Generierter Inhalt verändert den Dokumentbaum nicht.“

Um dieses Problem zu beheben, können Sie JavaScript verwenden, um das Pseudoelement basierend auf dem dynamisch auszublenden Vorhandensein eines Geschwisterbildes.

Das obige ist der detaillierte Inhalt vonWarum kann ich ein Pseudoelement nicht mit Geschwisterkombinatoren verbergen und wie kann ich das erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!