Können Geschwisterkombinatoren auf Pseudoelemente in CSS abzielen?

Geschwisterkombinatoren und Pseudoelemente: Targeting-Einschränkungen

Können Pseudoelemente mithilfe von Geschwisterkombinatoren gezielt angesprochen werden? Ein aktuelles CSS-Problem hat diese Frage aufgeworfen.

In diesem Szenario sollte ein Ankertag mit einem vorangehenden Bild kein Pseudoelement anzeigen. Ein direktes Anvisieren des Ankers ist aufgrund der Präsenz des Bildes nicht möglich. Daher wurde ein alternativer Ansatz unter Verwendung eines Geschwisterkombinators für das Pseudoelement versucht, wie unten gezeigt:

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

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

Das CSS kann das Pseudoelement jedoch nicht verbergen, wenn das Ankertag ein Bild umschließt. Warum ist das so?

Die Einschränkung liegt in der Natur von Pseudoelementen. Generierte Inhalte, einschließlich Pseudoelemente, werden nicht in das DOM aufgenommen und haben keine Auswirkungen auf das Originaldokument. Dies wird in der CSS-Spezifikation ausdrücklich angegeben:

„Generierter Inhalt verändert den Dokumentbaum nicht. Insbesondere wird er nicht an den Dokumentsprachenprozessor zurückgemeldet (z. B. zum erneuten Parsen).“

Folglich kann der Geschwisterkombinator nicht auf ein :before- oder :after-Pseudoelement abzielen, da diese nicht Teil des DOM sind Struktur.

Erwägen Sie für ähnliche Szenarien die Verwendung von JavaScript, um das DOM dynamisch zu manipulieren und die gewünschten Styling-Effekte zu erzielen.

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