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

Geschwisterkombinatoren und Pseudoelemente

In diesem CSS-Dilemma stoßen wir auf die Frage, ob es möglich ist, auf ein Pseudoelement abzuzielen, insbesondere :before oder :after unter Verwendung eines Geschwisterkombinators.

Bedenken Sie Folgendes CSS:

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

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

Und das nachfolgende 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="Können Geschwisterkombinatoren auf Pseudoelemente wie :before oder :after abzielen?" >
</a>

Die Absicht besteht darin, ein Pseudoelement auf alle passenden Anker-Tags anzuwenden, mit Ausnahme derjenigen, die ein Bild enthalten. Allerdings funktioniert das CSS nicht wie erwartet.

Die Antwort liegt in der Natur von Pseudoelementen. Gemäß der CSS-Spezifikation haben generierte Inhalte aus Pseudoelementen keinen Einfluss auf die DOM-Struktur. Dies bedeutet, dass Geschwisterkombinatoren, die auf im DOM-Baum vorhandenen Elementen basieren, nicht auf Pseudoelemente abzielen können.

Mit anderen Worten: Das CSS versucht, das :after-Pseudoelement auf gemeinsam genutzten Ankertags auszublenden ein Elternteil mit einem Bild. Da das :after-Pseudoelement jedoch nicht im DOM gerendert wird, ist es für den Geschwisterkombinator unmöglich, es zu finden.

Daher ist JavaScript oft eine geeignetere Lösung für das Targeting von Elementen basierend auf ihrem Beziehungen zu anderen Elementen im DOM.

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