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

CSS Rule Targeting Content-Based Selectors

Es stellt sich die Frage, ob es möglich ist, mithilfe von pure unterschiedliche Stile auf Anker anzuwenden, die ein bestimmtes Wort enthalten CSS, einschließlich CSS3. Aufgrund technischer Einschränkungen fehlt CSS allein die Funktionalität, Elemente basierend auf ihrem Inhalt auszuwählen.

Erklärung:

Während der „:contains“-Selektor einmal als vorgeschlagen wurde Da es sich um eine potenzielle Lösung handelt, wurde es nicht in den Arbeitsentwurf für CSS3-Selektoren integriert. Daher ist es nicht möglich, CSS ausschließlich für die Ausrichtung auf Elemente basierend auf ihrem Inhalt zu verwenden.

Alternativer Ansatz:

Als Workaround kann JavaScript zur Implementierung dieser Funktionalität eingesetzt werden. Ein Ansatz würde darin bestehen, alle Anker auf einer Seite zu durchlaufen und ihren inneren HTML-Code mithilfe regulärer Ausdrücke auf das Vorhandensein des gewünschten Worts zu testen. Wenn eine Übereinstimmung gefunden wird, kann der Stil des Ankers entsprechend geändert werden.

Codebeispiel:

Der folgende JavaScript-Code zeigt, wie dies erreicht werden kann:

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

In diesem Beispiel werden alle Anker auf der Seite iteriert, und wenn der innere HTML-Code eines Ankers das Wort „SpecificWord“ enthält (Groß- und Kleinschreibung wird nicht beachtet), seine Farbe ist auf Rot eingestellt.

Hinweis:

Während es innerhalb von reinem CSS keine direkte Lösung gibt, bietet JavaScript eine flexible Problemumgehung für die Anwendung Inhaltsbasiertes Styling.

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