クラス名 red を持つ要素が多数ありますが、次の CSS ルールを使用して class="red" を持つ最初の要素を選択できないようです:
red
class="red"
リーリー リーリー
このセレクターの何が問題なのでしょうか?クラス red の最初の子をターゲットにするように修正するにはどうすればよいですか?
:first-child セレクターの目的は、名前が示すように、親タグの最初の子タグを選択することです。したがって、この例は機能します (ここ で試してみただけです): リーリー
:first-child
ただし、タグを別の親タグの下にネストしている場合、または red クラス タグが親タグの下の最初のタグではない場合、この方法は機能しません。
また、これはドキュメント全体の最初のタグに適用されるだけでなく、そのタグを囲む新しい親タグがあるたびに適用されることにも注意してください。例:
first と third は赤になります。
first
third
あなたの場合、:nth-of-type セレクター:
:nth-of-type
このメソッドを含む回答を削除した Martyn に感謝します。
:nth-child() および :nth-of-type() の詳細については、http://www.quirksmode.org / をご覧ください。 css/nthchild.html。
:nth-child()
:nth-of-type()
これは CSS3 セレクターであるため、一部の古いバージョンのブラウザー (IE8 以前など) は期待どおりに機能しない可能性があることに注意してください。詳細については、https://caniuse.com/?search=nth-of-type をご覧ください。
これは、作者が :first-child の仕組みを誤解している最も有名な例の 1 つです。 CSS2 で導入された :first-child 擬似クラスは、親 の最初の子を表します。それでおしまい。複合セレクターの残りの部分で指定された条件に一致する最初の子要素が選択されるという非常によくある誤解があります。セレクターの動作方法 (説明については ここ を参照) により、これは単純に真実ではありません。
擬似クラスは、親
:first-of-type 疑似クラス が導入されます。 この回答では、:first-childと:first-of-typeの違いを画像とテキストで説明します。ただし、:first-child と同様に、他の条件やプロパティは調べません。 HTML では、要素の種類はタグ名で表されます。質問では、タイプは p です。 残念ながら、特定のクラスの最初の子要素に一致する類似の
が導入されます。
:first-of-type
p
疑似クラスはありません。この回答が最初に投稿されたとき、 新しくリリースされた FPWD セレクター レベル 4 では、既存のセレクター メカニズムを中心に設計された :nth-match() 疑似クラス が導入されました。最初の段落で説明したように、セレクター リスト パラメーターを追加することで、残りのセレクター複合セレクターを提供して、目的のフィルター動作を取得できます。近年、この機能 は :nth-child( ) 自体 に組み込まれ、セレクター リストはオプションの 2 番目の引数として表示され、物事を簡素化し、 を回避します。 nth- match() ドキュメント全体で一致しているという誤った印象 (以下の最後のコメントを参照) . クロスブラウザのサポート
新しくリリースされた FPWD セレクター レベル 4 では、既存のセレクター メカニズムを中心に設計された
が導入されました。最初の段落で説明したように、セレクター リスト パラメーターを追加することで、残りのセレクター複合セレクターを提供して、目的のフィルター動作を取得できます。近年、この機能
に組み込まれ、セレクター リストはオプションの 2 番目の引数として表示され、物事を簡素化し、
Lea Verouそして私は、最初にそのクラスの すべての 要素に必要なスタイルを適用することによって、独立して開発しました (彼女が最初にそれを行いました!)。 リーリー ...次に、 を使用して、ルール ~
: 内の汎用兄弟コンビネータをオーバーライドします。 リーリー これで、class="red" を持つ最初の要素のみに境界線が付きます。
これで、
ルールを適用する方法については次のとおりです:
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
:first-childセレクターの目的は、名前が示すように、親タグの最初の子タグを選択することです。したがって、この例は機能します (ここ で試してみただけです): リーリーただし、タグを別の親タグの下にネストしている場合、または
redクラス タグが親タグの下の最初のタグではない場合、この方法は機能しません。また、これはドキュメント全体の最初のタグに適用されるだけでなく、そのタグを囲む新しい親タグがあるたびに適用されることにも注意してください。例:
リーリーfirstとthirdは赤になります。あなたの場合、
を使用できます。:nth-of-typeセレクター:このメソッドを含む回答を削除した Martyn に感謝します。
:nth-child()および:nth-of-type()の詳細については、http://www.quirksmode.org / をご覧ください。 css/nthchild.html。これは CSS3 セレクターであるため、一部の古いバージョンのブラウザー (IE8 以前など) は期待どおりに機能しない可能性があることに注意してください。詳細については、https://caniuse.com/?search=nth-of-type をご覧ください。
これは、作者が
セレクター レベル 3 では、要素型の兄弟の中で最初の要素を表す:first-childの仕組みを誤解している最も有名な例の 1 つです。 CSS2 で導入された :first-child擬似クラスは、親の最初の子を表します。それでおしまい。複合セレクターの残りの部分で指定された条件に一致する最初の子要素が選択されるという非常によくある誤解があります。セレクターの動作方法 (説明については ここ を参照) により、これは単純に真実ではありません。:first-of-type 疑似クラス
:first-of-classが導入されます。この回答では、:first-childと:first-of-typeの違いを画像とテキストで説明します。ただし、:first-childと同様に、他の条件やプロパティは調べません。 HTML では、要素の種類はタグ名で表されます。質問では、タイプはpです。疑似クラスはありません。この回答が最初に投稿されたとき、
を待っている間 (真剣に言うと、もう 10 年近く経ちますが、過去 5 年間で実装されたのは 1 回だけです)、回避策は次のとおりです新しくリリースされた FPWD セレクター レベル 4 では、既存のセレクター メカニズムを中心に設計された:nth-match() 疑似クラスが導入されました。最初の段落で説明したように、セレクター リスト パラメーターを追加することで、残りのセレクター複合セレクターを提供して、目的のフィルター動作を取得できます。近年、この機能は :nth-child( ) 自体に組み込まれ、セレクター リストはオプションの 2 番目の引数として表示され、物事を簡素化し、を回避します。 nth- match() ドキュメント全体で一致しているという誤った印象 (以下の最後のコメントを参照) .Lea Verouそして私は、最初にそのクラスの すべての 要素に必要なスタイルを適用することによって、独立して開発しました (彼女が最初にそれを行いました!)。 リーリー ...次に、 を使用して、ルール ~
: 内の汎用兄弟コンビネータをオーバーライドします。 リーリー
これで、class="red" を持つ最初の要素のみに境界線が付きます。ルールを適用する方法については次のとおりです: