ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用してドキュメント全体内の特定の要素タイプの最初のインスタンスを選択する方法
CSS を使用してドキュメント全体内の特定の要素タイプの最初のインスタンスを選択する方法
- Linda Hamiltonオリジナル
- 2024-12-08 22:52:12596ブラウズ
ドキュメント内の任意の場所にある特定の型の最初の要素と一致する
質問:
最初の要素を指定するにはどうすればよいですか?を使用してドキュメント全体内の特定の要素タイプのインスタンスを作成します。 CSS?
答え:
通常の CSS では、ドキュメント全体で特定のタイプの最初の要素を一致させることはできません。これは、:first-of-type 擬似クラスがドキュメント ルートではなく、親に関連する要素にのみ適用されるためです。
JavaScript ソリューション
:first-of-type のシミュレーション
querySelector() メソッドを使用して、JavaScript で :first-of-type の機能を近似することができます。このメソッドは、指定された要素から最初に一致する要素を取得します。セレクター。以下に例を示します。
document.querySelector('p').className += ' first-of-type';
p {
background: red;
}
p.first-of-type {
background: pink;
}
このコードは、「first-of-type」クラスを最初の
に割り当てます。要素をドキュメント内に追加し、個別にスタイルを設定できるようにします:
<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>以上がCSS を使用してドキュメント全体内の特定の要素タイプの最初のインスタンスを選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。