CSS を使用してドキュメント全体内の特定の要素タイプの最初のインスタンスを選択する方法

ドキュメント内の任意の場所にある特定の型の最初の要素と一致する

質問:

最初の要素を指定するにはどうすればよいですか?を使用してドキュメント全体内の特定の要素タイプのインスタンスを作成します。 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」クラスを最初の

に割り当てます。要素をドキュメント内に追加し、個別にスタイルを設定できるようにします:

  <section>
    <p>111</p>
    <p>222</p>
    <p>333</p>
  </section>
  <p>444</p>
  <p>555</p>

以上がCSS を使用してドキュメント全体内の特定の要素タイプの最初のインスタンスを選択する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。