9

なぜこれが機能しないのか、誰かが私に説明できますか?

<html>
 <head>
  <style>
   body:first-child
   {
      color:#f00;
   }
  </style>
 </head>
 <body>
  <div>I should be red.</div>
  <div>This is not red.</div>
 </body>
</html>

私が読んだことから、最初の子セレクターは body タグから最初の div オブジェクトを選択する必要があります。div 要素を選択していない場合、何を選択していますか?

4

4 に答える 4

17

の:first-child疑似クラスbody:first-childはbodyタグで動作するため、親の最初の子であるbodyタグが選択されます。最初の子が必要な場合は、子セレクターbodyを使用します。 

body > :first-child{
    color:#f00;
}

これはあなたに体の最初の子供を与えるでしょう。

于 2012-08-22T19:33:39.287 に答える
8

最初の div をターゲットにするには、次のことを行う必要がありますbody div:first-child。現在（私は推測しています）、最初の子の体を選択しているだけです。（実際には、あなたが今何を選択しているのか完全にはわかりません。考えてみてください。first-childセレクターが body タグに直接ぶら下がっても有効ではないと思います。）

body div:first-child {
    color:#f00;
}​

この CSS は、期待どおりに色を付けます。「body の最初の子である div」と読みます。

于 2012-08-22T19:30:34.690 に答える
1

CSSは、HTML要素となる親要素の最初の子であるBODY要素を選択すると言っています。BUtHEADはBODYではなく最初の子です。

少なくとも私はそれが正しいと思います:-)

于 2012-08-22T19:35:07.077 に答える