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

【问题标题】：Why does div#foo hr:first-child not work为什么 div#foo hr:first-child 不起作用
【发布时间】：2012-09-07 02:06:37
【问题描述】：

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

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

【问题讨论】：

【解决方案1】：

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

请参阅this updated demo，它使边框更加明显并将 hr 移到顶部。

您可能想查看:first-of-type，它是 CSS 3 中的新功能，并且可以满足您的需求。（我可以在非当前 IE 之外使用suggests that it has wide support）。

参见a demo using :first-of-type（我只在 Chrome 中测试过）。

【讨论】：

【解决方案2】：

因为#main 的first-child 是p，而不是hr。

您可以使用nth-child：

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

【讨论】：