html - div＃foo hr：first-childが機能しないのはなぜですか

Question

#foo p：first-childと言えば、これはうまくいくはずだと思います。なぜ#foo hr：first-childが機能しないのですか。誰かがこれを説明することができれば、私は本当に感謝します。

ここでJSFiddleデモをセットアップしました-http ://jsfiddle.net/mGu7x/6/

Answer 1

どの<hr>要素も、親要素の最初の子ではありません。

境界線をより明確にし、時間を上に移動するこの更新されたデモを参照してください。

:first-of-typeCSS 3の新機能であり、探しているように見えることを実行するものを確認することをお勧めします。（Can I Useは、non-current-IE以外で幅広いサポートがあることを示しています）。

を使用したデモを:first-of-type参照してください（これはChromeでのみテストしました）。

Answer 2

#main'sfirst-childは、ではpなく、hrです。

ただし、n番目の子は使用できます。

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