:first-of-type 擬似クラス セレクターを使用して、同じ型の最初の要素のスタイルを選択します。

CSS の first-of-type 疑似クラス セレクターを使用すると、同じ型の最初の要素を選択してスタイルを設定できます。このセレクターは、p、div、span などの複数のタグ要素に使用できます。

以下は具体的なサンプル コードです:

HTML コード:

<div class="container">
  <h1>标题1</h1>
  <p>第一段文字</p>
  <p>第二段文字</p>
  <h2>标题2</h2>
  <p>第三段文字</p>
  <p>第四段文字</p>
</div>

CSS コード:

p:first-of-type {
  font-weight: bold;
}

上記のコードでは、A p を選択しました。タグ要素を選択し、太字に設定します。結果はブラウザに表示され、テキストの最初の段落が太字に設定されます。

同様に、first-of-type セレクターを使用して、他のタグ要素の最初を選択することもできます。例:

h1:first-of-type {
  font-size: 24px;
}

ここでは、最初の h1 タグ要素を選択し、そのフォント サイズを 24 ピクセルに設定します。

first-of-type セレクターを使用すると、同じタイプの要素の最初の要素のみを選択できることに注意してください。さまざまなタイプの要素の中から最初の要素を選択したい場合は、:first-child を使用できます。

つまり、first-of-type 疑似クラス セレクターを使用すると、同じ型の最初の要素に特定のスタイルを非常に簡単に設定できます。

以上が:first-of-type 擬似クラス セレクターを使用して、同じ型の最初の要素のスタイルを選択します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。