


Können Sie Anker basierend auf ihrem Inhalt mit reinem CSS formatieren?
Nov 15, 2024 am 07:46 AMAnker 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!

Hot-Tools-Tags

Heißer Artikel

Hot-Tools-Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Hinzufügen von Kastenschatten zu WordPress -Blöcken und -Elementen

Erstellen Sie ein JavaScript -Kontaktformular mit dem Smart Forms Framework

Erstellen Sie einen Inline -Texteditor mit dem inhaltlichen Attribut

Machen Sie Ihren ersten Seltsamen -Sufle -Übergang

Vergleich der 5 besten PHP -Formbauer (und 3 kostenlose Skripte)

Datei hochladen mit Multer in node.js und ausdrücken

Beste CSS -Animationen und Effekte auf Codecanyon 2025 (kostenlos bezahlt)
