Kann jQuery CSS-Pseudoelemente wie :before und :after auswählen?

Zugriff auf Pseudoelemente über jQuery

Bei der Bearbeitung einer früheren Frage haben wir die Herausforderung untersucht, Pseudoelemente basierend auf den Auswirkungen von CSS-Regeln auszuwählen. Lassen Sie uns einen alternativen Ansatz mit jQuery-Selektoren erkunden.

Hintergrundeigenschaften

Berücksichtigen Sie die folgenden Standard-CSS-Eigenschaften:

.commentarea .author:before {
    background-image: url(http://...);
    background-position: -9999px -9999px;
    /* ... */
}

Diese Eigenschaften werden dann geändert selektiv:

.author[href$="gbacon"]:before /* ... */ {
  content: "";
  background-position: 0 -140px
}

jQuery Selektoren

Um Pseudoelemente mit Standardhintergrundpositionen auszuwählen, funktionieren einfache Selektoren wie dieser nicht:

GM_log("size = " + $(".commentarea .author:before").size());

Andere Versuche, wie die Verwendung von .siblings(), schlagen ebenfalls fehl um die gewünschten Ergebnisse zu erzielen.

Einschränkungen des Pseudoelements Selektoren

Es ist wichtig zu beachten, dass :before und :after keine gültigen jQuery-Selektoren sind. Sie dienen einem bestimmten Zweck:

• :before fügt Inhalte vor dem ausgewählten Element ein
• :after fügt Inhalte nach dem ausgewählten Element ein

Beispiel Verwendung

Das folgende HTML und CSS veranschaulichen, wie :before und :after funktioniert Arbeit:

<span class='a'>
    Outer
    <span class='b'>
        Inner
    </span>
</span>

.a .b:before {
    content: "|Inserted using :before|";
}

.a {
    color: blue;
}

.b {
    color: red;
}

In diesem Beispiel wird der Text mit :before dem inneren Bereich vorangestellt.

Alternativen

Da: before kein gültiger jQuery-Selektor ist, sind alternative Ansätze erforderlich. Eine Möglichkeit besteht darin, externe jQuery-Plugins wie jQueryRule zu verwenden, um die ursprüngliche Regel zu extrahieren.

Bitte beachten Sie, dass der Zugriff auf Stileigenschaften von Pseudoelementen mit jQuery eine Herausforderung sein kann. Überlegen Sie sorgfältig, ob es alternative Ansätze gibt, die Ihren Bedürfnissen besser gerecht werden könnten.

Das obige ist der detaillierte Inhalt vonKann jQuery CSS-Pseudoelemente wie :before und :after auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!