CSS を使用してコンテンツに基づいてアンカーのスタイルを設定できますか?

コンテンツに基づく CSS ルール

特定の単語を含むアンカーに個別のスタイルを適用するために CSS を使用できますか?

回答

残念ながら、純粋な CSS は、コンテンツに基づいて要素をスタイル設定するためのネイティブ ソリューションを提供しません。提案された ':contains' セレクターは、現在の CSS3 セレクター作業草案の一部ではありません。

JavaScript の回避策

この機能を実現するには、JavaScript を使用できます。たとえば、次のコード スニペットは、ドキュメント内のすべてのリンクを反復処理し、コンテンツが文字列「SpecificWord」と一致するアンカーに赤色を適用します。

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

このサンプル HTML は、スクリプトの効果を示しています。

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

実行すると、最初のアンカーは赤色でスタイル設定されますが、2 番目のアンカーはデフォルトのスタイルを保持します。

以上がCSS を使用してコンテンツに基づいてアンカーのスタイルを設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。