CSS3 はコンテンツに基づいて要素のスタイルを設定できますか?

コンテンツに基づいて CSS ルールを適用する方法

特定の単語や要素を含む要素に特定のスタイルを適用するのは一般的な要件です。フレーズ。最新の CSS には高度な機能がありますが、直接処理できない特定の側面があります。

CSS3 はコンテンツに基づいて要素をスタイルできますか?

簡単な答えはノーです。 CSS3 には、コンテンツに基づいて要素のスタイルを設定できるネイティブ セレクターが含まれていません。この機能を有効にする提案された :contains セレクターは、CSS3 セレクターの現在の作業草案から削除されました。

代替ソリューション

コンテンツベースのスタイルを実現するには、JavaScriptを使用できます。次のスニペットは、「SpecificWord」という単語を含むアンカーに赤色を適用する方法を示しています。

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

この JavaScript コードは、すべてのアンカー要素 (document.links) を反復処理し、innerHTML に必要な要素が含まれているかどうかを確認します。

結論として、CSS はコンテンツベースのスタイルをネイティブにサポートしていませんが、JavaScript を使用して実現できます。同様の結果。これにより、特定のコンテンツ要件を満たす要素のきめ細かいスタイル ルールを作成できます。

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