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

コンテンツベースのセレクターをターゲットとする CSS ルール

純粋なメソッドを使用して、特定の単語を含むアンカーに個別のスタイルを適用できるかどうかという疑問が生じます。 CSS (CSS3 を含む)。技術的な制限により、CSS だけではコンテンツに基づいて要素を選択する機能が不足しています。

説明:

「:contains」セレクターはかつては潜在的な解決策であるため、CSS3 セレクターの作業草案には組み込まれていません。したがって、コンテンツに基づいて要素をターゲットにするために CSS を排他的に使用することは現実的ではありません。

代替アプローチ:

回避策として、JavaScript を使用してこの機能を実装できます。 1 つのアプローチでは、ページ上のすべてのアンカーを反復処理し、正規表現を使用して内部 HTML に目的の単語が存在するかどうかをテストします。一致するものが見つかった場合は、それに応じてアンカーのスタイルを変更できます。

コード例:

次の JavaScript コードは、これを実現する方法を示しています。

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

この例では、ページ上のすべてのアンカーが反復処理され、アンカーの内部 HTML に単語が含まれている場合、 "SpecificWord" (大文字と小文字は区別されません)、その色は赤に設定されます。

注:

純粋な CSS 内に直接的な解決策はありませんが、JavaScript は柔軟な解決策を提供します。コンテンツベースのスタイルを適用するための回避策。

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