ドキュメント全体で最初に出現する特定の HTML 要素のスタイルを設定するにはどうすればよいですか?

ドキュメント全体の特定の型の最初/N 番目の要素との一致

問題:
特定の HTML 要素の最初の出現に CSS スタイルを適用するにはどうすればよいですか?ドキュメント内の場所は?

CSS 解決策:
残念ながら、CSS だけではこれを実現できません。 :first-of-type 擬似クラスは、親要素内の最初の型である要素にのみ適用されます。

JavaScript 解決策: querySelector()
JavaScript を使用すると、 querySelector() メソッドを利用して、ドキュメント内の要素を識別して操作できます。たとえば、ドキュメント内の最初の p 要素のスタイルを設定するには、次のようにします。

document.querySelector('p').className = ' first-of-type';<br>

このコードは、クラス「first-of-type」を最初の p 要素に追加します。これは、次の CSS を使用してスタイル設定できます。ルール:

p.first-of-type {
背景: ピンク;
}

結論:

CSS だけでは不可能ですが、JavaScript の querySelector() メソッドを使用すると、柔軟なソリューションが提供されます。ドキュメント全体の特定のタイプの最初/n 番目の要素のマッチングとスタイル設定を行います。

以上がドキュメント全体で最初に出現する特定の HTML 要素のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。