html - 为什么 div#foo hr:first-child 不起作用

Question

我觉得这应该可行，如果您可以说 #foo p:first-child 为什么 #foo hr:first-child 不起作用。如果有人能解释这一点，我将不胜感激。

我在这里设置了一个 JSFiddle 演示 - http://jsfiddle.net/mGu7x/6/

Answer 1

所有<hr>元素都不是其父元素的第一个子元素。

请参阅此更新的演示，它使边框更加明显并将 hr 移到顶部。

您可能想查看:first-of-typeCSS 3 中的哪些新功能以及您正在寻找的功能。（我可以使用表明它在非当前 IE 之外有广泛的支持）。

查看使用的演示:first-of-type（我只在 Chrome 中测试过）。

Answer 2

因为#main'sfirst-child是一个p，而不是一个hr。

您可以使用nth-child：

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