CSS3 の `:first-of-type` セレクターは、特定のクラスの最初のインスタンスをターゲットにすることができますか?

CSS3 :first-of-type セレクターは特定のクラス名をターゲットにできますか?

CSS3 :first-of-type セレクターは特定のクラス名を選択できますが、特定の型 (div、p など) の最初の要素は、クラスの最初の出現をターゲットにするために独立して使用することはできません 名前。これは、:first-of-type でクラス セレクター (または型セレクター) を使用することは、次の要素を選択することを意味するためです。

• 指定されたクラス (または型) を持つ
• 兄弟の中でその型の最初の要素

ただし、CSS には、排他的に選択する固有の :first-of-class セレクターはありません。クラスの最初のインスタンス。

回避策

この機能を実現するには、次の回避策を使用できます。

.myclass1 { color: red; }
.myclass1 ~ .myclass1 { color: /* default or inherited from parent */; }

この回避策は、隣接兄弟コンビネータ (~) を使用して、最初を除くすべての .myclass1 のスタイルを設定します。最初の .myclass1 は、その親 div から色を継承します (またはブラウザーのデフォルト)。

この回避策の詳細と視覚的な図については、以下を参照してください。

• [W3Schools] : 子と兄弟の使用セレクター](https://www.w3schools.com/css/sel_combinators.asp)
• [CSS トリック: 最初の兄弟のスタイル設定](https://css-tricks.com/styling-first-sibling /)

以上がCSS3 の `:first-of-type` セレクターは、特定のクラスの最初のインスタンスをターゲットにすることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。