使用方法: 親要素に同じ型の要素が 1 つだけある CSS スタイルを選択する、型のみの疑似クラス セレクター

親要素に同じ型の要素が 1 つだけ含まれる CSS スタイルを選択するための、only-of-type 擬似クラス セレクターの使用方法。特定のコード例が必要です。

CSS を使用する場合 ページをデザインするとき、要素の数や特定の条件に基づいて、さまざまなスタイルを選択して適用することが必要になることがよくあります。一般的に使用される疑似クラス セレクターの 1 つは:only-of-type です。このセレクターは、親要素内の同じタイプの要素のスタイルを 1 つだけ選択できます。この記事では、:only-of-type 疑似クラス セレクターの使用方法を詳しく説明し、いくつかの具体的なコード例を示します。

まず、only-of-type 疑似クラス セレクターの基本構文を理解しましょう。このセレクターは、親要素を使用して、同じタイプの 1 つの要素のみのスタイルを選択します。構文は次のとおりです:

父元素:only-of-type {
  /* CSS样式 */
}

上記のコードでは、親要素は選択される要素の直接の親要素であり、同じ型の要素が 1 つしかない場合、指定されたスタイルが適用されます。 。

以下では、いくつかの具体的な例を使用して、:only-of-type 疑似クラス セレクターの使用方法を示します。次のような HTML コードがあるとします。

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <p>第三个段落</p>
</div>
<div>
  <p>第四个段落</p>
  <p>第五个段落</p>
</div>

例 1: p 要素が 1 つだけある div を選択します
p 要素が 1 つだけある div を選択し、その背景色を赤、次のコードを使用できます:

div:only-of-type {
  background-color: red;
}

例 2: p 要素が 1 つだけある div 内の p 要素を選択します
p 要素が 1 つだけある div 内の p 要素を選択したい場合、テキストの色を青色に設定する場合は、次のコードを使用できます。

div:only-of-type p {
  color: blue;
}

例 3: 1 つのスパン要素のみを持つ親要素を選択します
次のような HTML コードがあるとします。

<div>
  <span>第一个span</span>
</div>
<div>
  <span>第二个span</span>
  <span>第三个span</span>
</div>

親要素を 1 つだけ選択し、その境界線の色を緑色に設定したい場合は、次のコードを使用できます。

div span:only-of-type {
  border: 1px solid green;
}

上記のコードでは、親要素の境界線の色を設定します。スパン要素が 1 つだけある親要素が緑色になります。

概要:
:only-of-type 擬似クラス セレクターを使用すると、親要素内の同じ型の要素のスタイルを 1 つだけ選択できます。実際の開発プロセスでは、実際のニーズに応じてさまざまな CSS スタイルが選択され、ページ デザインが最適化されます。この記事で提供されている具体的なコード例を使用すると、:only-of-type 疑似クラス セレクターの使用方法をよりよく理解できます。

この記事があなたのお役に立てば幸いです。また、ページ デザインでの成功を祈っています。

以上が使用方法: 親要素に同じ型の要素が 1 つだけある CSS スタイルを選択する、型のみの疑似クラス セレクターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。