Kann CSS3 Elemente basierend auf Inhalt formatieren?

So wenden Sie CSS-Regeln basierend auf dem Inhalt an

Es ist eine häufige Anforderung, einen bestimmten Stil auf Elemente anzuwenden, die ein bestimmtes Wort oder enthalten Phrase. Während modernes CSS über erweiterte Funktionen verfügt, gibt es einen bestimmten Aspekt, den es nicht direkt bewältigen kann.

Kann CSS3 Elemente basierend auf Inhalt formatieren?

Die einfache Antwort lautet Nein. CSS3 enthält keinen nativen Selektor, mit dem Sie Elemente basierend auf ihrem Inhalt formatieren können. Der vorgeschlagene :contains-Selektor, der diese Funktionalität ermöglicht hätte, wurde aus dem aktuellen Arbeitsentwurf der CSS3-Selektoren entfernt.

Alternative Lösungen

Um inhaltsbasiertes Styling zu erreichen , können Sie JavaScript verwenden. Das folgende Snippet zeigt, wie man eine rote Farbe auf Anker anwendet, die das Wort „SpecificWord“ enthalten:

Array.from(document.links).forEach(link => {
  if (/\bSpecificWord\b/i.test(link.innerHTML)) {
    link.style.color = 'red';
  }
});

Dieser JavaScript-Code durchläuft alle Ankerelemente (document.links) und prüft, ob deren innerHTML das gewünschte enthält Wort, und wenn es wahr ist, wird die rote Farbe angewendet.

Zusammenfassend lässt sich sagen, dass CSS zwar inhaltsbasiertes Styling nicht nativ unterstützt, Sie jedoch JavaScript verwenden können, um Ähnliches zu erreichen Ergebnisse. Dadurch können Sie fein abgestimmte Stilregeln für Elemente erstellen, die bestimmte Inhaltsanforderungen erfüllen.

Das obige ist der detaillierte Inhalt vonKann CSS3 Elemente basierend auf Inhalt formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!