Können Sie Anker basierend auf ihrem Inhalt mit reinem CSS formatieren?

Anker basierend auf Inhalten mit CSS formatieren

Können Sie mit reinem CSS einen eindeutigen Stil auf Anker anwenden, die ein bestimmtes Wort enthalten? Obwohl der Vorschlag des :contains-Selektors in der Vergangenheit in Betracht gezogen wurde, ist er derzeit nicht Teil der offiziellen CSS3-Selektorspezifikation.

Lösung:

Da reinem CSS der fehlt Durch die Fähigkeit, Anker basierend auf ihrem Inhalt anzusprechen, wird JavaScript zur alternativen Lösung.

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

Dieses Skript durchläuft alle Links auf einer Seite und prüft, ob sie irgendwo in ihrem HTML-Inhalt die Zeichenfolge „SpecificWord“ enthalten . Wenn eine Übereinstimmung gefunden wird, wird die Farbe des Links auf Rot gesetzt, wie in der Stileigenschaft angegeben.

Verwendung:

Um diese Lösung zu verwenden, können Sie einbetten das Skript in eine HTML-Seite. Hier ist ein Beispiel:

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

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

Dieses Skript färbt das erste Ankerelement rot, da es die Zeichenfolge „SpecificWord“ enthält.

Das obige ist der detaillierte Inhalt vonKönnen Sie Anker basierend auf ihrem Inhalt mit reinem CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!