Können Geschwisterkombinatoren :before oder :after Pseudoelemente in CSS auswählen?

Können Geschwisterkombinatoren auf :before oder :after Pseudoelemente abzielen?

In CSS werden Geschwisterkombinatoren verwendet, um Stile auf Elemente anzuwenden, die haben dasselbe übergeordnete Element, sind aber nicht ineinander verschachtelt. Können diese Kombinatoren jedoch verwendet werden, um auf Pseudoelemente wie :before und :after abzuzielen?

Die Herausforderung

Berücksichtigen Sie das folgende CSS und HTML Code:

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

Die Absicht

Dieses CSS zielt darauf ab, a hinzuzufügen Ankern, die mit „http“ beginnen, wird eine rote Markierung hinzugefügt. Ankern, die ein Bild enthalten, sollte die Markierung jedoch nicht hinzugefügt werden. Da Anker-Tags nicht direkt mit img-Elementen gezielt angesprochen werden können, wird angenommen, dass Geschwisterkombinatoren auf das :after-Pseudoelement von Anker-Tags abzielen könnten, die Bild-Geschwister haben.

Das Problem

Dieses CSS funktioniert jedoch nicht wie vorgesehen. Das Pseudoelement wird für Anker, die ein Bild enthalten, nicht ausgeblendet.

Die Erklärung

Der Grund für dieses Verhalten liegt in der Natur von Pseudoelementen. Pseudoelemente sind nicht Teil des DOM-Baums und werden vom Browser generiert. Daher können Geschwisterkombinatoren sie nicht direkt ansprechen.

In der CSS-Spezifikation heißt es: „Generierter Inhalt verändert den Dokumentbaum nicht. Insbesondere wird er nicht an den Dokumentsprachenprozessor zurückgegeben (z. B. zum Reparieren). )."

Die Lösung

Um den gewünschten Effekt zu erzielen, muss JavaScript eingesetzt werden. Ein Skript könnte die Ankertags durchlaufen und basierend auf ihrem Bildinhalt den gewünschten Stil hinzufügen oder entfernen.

Das obige ist der detaillierte Inhalt vonKönnen Geschwisterkombinatoren :before oder :after Pseudoelemente in CSS auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!