ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS を使用してドキュメント全体内の特定の要素タイプの最初のインスタンスを選択する方法

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

Linda Hamilton
リリース: 2024-12-08 22:52:12
オリジナル
657 人が閲覧しました

How to Select the First Instance of a Specific Element Type in an Entire Document Using CSS?

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

質問:

最初の要素を指定するにはどうすればよいですか?を使用してドキュメント全体内の特定の要素タイプのインスタンスを作成します。 CSS?

答え:

通常の CSS では、ドキュメント全体で特定のタイプの最初の要素を一致させることはできません。これは、:first-of-type 擬似クラスがドキュメント ルートではなく、親に関連する要素にのみ適用されるためです。

JavaScript ソリューション

:first-of-type のシミュレーション

querySelector() メソッドを使用して、JavaScript で :first-of-type の機能を近似することができます。このメソッドは、指定された要素から最初に一致する要素を取得します。セレクター。以下に例を示します。

1

document.querySelector('p').className += ' first-of-type';

ログイン後にコピー

1

2

3

4

5

6

7

p {

  background: red;

}

 

p.first-of-type {

  background: pink;

}

ログイン後にコピー

このコードは、「first-of-type」クラスを最初の

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

1

2

3

4

5

6

7

8

9

<body>

  <section>

    <p>111</p>

    <p>222</p>

    <p>333</p>

  </section>

  <p>444</p>

  <p>555</p>

</body>

ログイン後にコピー

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート