Question

我的印象是：如果该元素是父元素的第一个子元素，第一个子元素将选择一个元素...例如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文件中尝试了我发布的内容并且DID正常工作......但是在示例中我将链接它不起作用：

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

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

你可能看不到任何css陈述：检查员中的第一个孩子......因为它根本就没有认出它在那里。我确实在template.css文件中有这一行：

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

Answer 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！

不明白为什么：第一个孩子没有按预期工作

1 个答案: