Kann ich Anker mithilfe von CSS basierend auf ihrem Inhalt formatieren?

CSS-Regel basierend auf Inhalt

Kann CSS verwendet werden, um einen bestimmten Stil auf Anker anzuwenden, die ein bestimmtes Wort enthalten?

Antwort

Leider bietet reines CSS keine native Lösung, um Elemente basierend auf ihrem Inhalt zu formatieren. Der vorgeschlagene „:contains“-Selektor ist nicht Teil des aktuellen CSS3-Selektor-Arbeitsentwurfs.

JavaScript-Problemumgehung

Um diese Funktionalität zu erreichen, kann JavaScript verwendet werden. Der folgende Codeausschnitt durchläuft beispielsweise alle Links im Dokument und wendet eine rote Farbe auf jeden Anker an, dessen Inhalt mit der Zeichenfolge „SpecificWord“ übereinstimmt:

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

Dieses Beispiel-HTML demonstriert die Wirkung des Skripts:

<a href="#">SpecificWord</a>
<a href="#">OtherWords</a>

Bei der Ausführung wird der erste Anker mit einer roten Farbe gestylt, während der zweite seinen Standardstil behält.

Das obige ist der detaillierte Inhalt vonKann ich Anker mithilfe von CSS basierend auf ihrem Inhalt formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!