0

我的印象是 :first-child 将选择一个元素，如果该元素是父元素的第一个子元素......例如 h1:first-child 应该选择 h1 如果它是其父元素的第一个子元素。但是我有这种情况，它似乎没有工作，甚至没有被浏览器考虑（它只是没有出现在 chrome 的代码检查器中）。

我的代码如下：

HTML：

<html>
<body>
<div>
<h1>Sample Header</h1>
</div>
</body>
</html>

CSS：

h1 {
margin:20px 0;
}

h1:first-child {
margin-top:0;
}

然而，它的顶部仍然有 20px 的边距。h1 是那个 div 的第一个孩子……那为什么不起作用呢？

编辑： 它与body标签等没有任何关系，我知道如果不理会body标签默认有一个边距。

这是问题站点的链接，因为我尝试了我在单独的 html 文件中发布的内容并且它确实有效......但在示例中我将链接它不起作用：

http://www.thecreativedesignfactory.com/test/index.html

我也不想使用 :first-of-type 因为它不受 IE 7-8 的支持。 :first-child 是一个更好的解决方案。

您可能在检查器中看不到任何 css 说明 :first-child ... 因为它根本无法识别它的存在。我确实在 template.css 文件中有这一行：

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, {
    margin-top:0;
}
4

1 回答 1

1

您的 CSS 中有错字

.inner-padding h1:first-child, .inner-padding h2:first-child, .inner-padding h3:first-child, .inner-padding h4:first-child, .inner-padding h5:first-child, .inner-padding h6:first-child**,** {
    margin-top:0;
}

删除选择器中的最后一个逗号（否则它无效且未解析）。小提琴：http: //jsfiddle.net/yGgXP/

另外，下一次，请为您的问题制作一个 jsFiddle！

于 2013-05-15T22:29:07.243 回答