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

CSS を使用したコンテンツに基づくアンカーのスタイル

純粋な CSS を使用して、特定の単語を含むアンカーに個別のスタイルを適用できますか? :contains セレクターの提案は過去に検討されましたが、現在は公式の CSS3 セレクター仕様の一部ではありません。

解決策:

純粋な CSS にはコンテンツに基づいてアンカーをターゲットにする機能がある場合、JavaScript が代替ソリューションになります。

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

このスクリプトは、ページ上のすべてのリンクを反復処理し、HTML コンテンツ内のどこかに「SpecificWord」文字列が含まれているかどうかを確認します。 。一致するものが見つかった場合、スタイル プロパティで指定されているように、リンクの色が赤に設定されます。

使用法:

このソリューションを使用するには、次のように埋め込みます。スクリプトを HTML ページに追加します。以下に例を示します:

<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>

このスクリプトは、「SpecificWord」文字列が含まれているため、最初のアンカー要素を赤にします。

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