CSS の内部 HTML に基づいて要素をスタイル設定できますか?

CSS: 内部 HTML に基づいて要素を選択する

正確な Web スタイルを追求すると、次の要素に基づいて要素を選択する必要が生じる場合があります。内部の HTML コンテンツ。ただし、このタスクは CSS によってネイティブにサポートされていないことに注意してください。

CSS を使用して、2 番目のアンカー タグのみを「innerHTML2」でスタイル設定する例を考えてみましょう。 [value=innerHTML2] のような試みにもかかわらず、このアプローチは不十分です。 CSS には、要素の内部 HTML に直接アクセスして照合する機能がありません。

解決策

追求を放棄したくなるかもしれませんが、解決策は存在します。 JavaScript と jQuery ライブラリの領域。 jQuery は、内部コンテンツに基づいて要素を選択する機能など、DOM 要素を操作するための堅牢なメソッドのセットを提供します。

このタスクを実行するには、jQuery の :contains() セレクターを利用できます。以下に例を示します。

$("a:contains('innerHTML2')").css({"color": "blue"});

このコードは、内部 HTML「innerHTML2」を持つアンカー タグを選択し、そのテキストに青色を適用します。 jQuery の :contains() セレクターは、内部 HTML 内に指定されたテキストを含む要素を効率的に照合します。

このソリューションでは、HTML ドキュメントに jQuery ライブラリを含める必要があることに注意してください。 jQuery を組み込むと、内部の HTML コンテンツに基づいて要素をシームレスに選択してスタイル設定できるようになり、Web デザインの機能が拡張されます。

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