なぜdiv＃foo hr：first-childが動作しないのですか？

Question

#foo p：first-childなぜ#foo hr：first-child does not workと言うことができるのでしょうか？誰かがこれを説明できるなら、私は本当にそれを感謝します。 <hr>要素のhttp://jsfiddle.net/mGu7x/6/

Answer 1

なし親要素の最初の子ではない -

は、私はここJSFiddleデモのセットアップをしました。

this updated demoを参照すると、境界がより明瞭になり、hrが上に移動します。

:first-of-typeは、CSS 3の新機能で、探しているように見えます。 （非現行IE以外のsuggests that it has wide supportを使用できますか？）

a demo using :first-of-type（Chromeでのみテスト済み）を参照してください。

Answer 2

#mainのfirst-childがpであるため、hrではありません。

あなたはしかしnth-childを使用することができます：最初の-type`が使用されることが意図されています

#main hr:nth-child(2) { 
    border-bottom: 3px solid green; 
}