Question

我正在尝试为所有段落元素设置20px的margin-top，除了第一个。我有这段代码：

    <div>
            <h3>Title</h3>
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
            <p>Paragraph 3</p>
    </div>

这是我的CSS：

div p{
    margin-top: 20px;
}
div p:first-child{
    margin-top: 0;
}

但这不起作用......我认为这是因为，但我无法弄清楚如何解决它......我相信你可以帮助我！如果我搞砸了我的英语，我很抱歉，我希望自己清楚明白！

感谢!!!

Answer 1

要为除第一个元素之外的一系列此类元素中的所有段落元素设置20px的margin-top，请使用

p + p { margin-top: 20px; }

如果您还希望将序列中第一个p元素的边距顶部设置为零（如图所示），只需添加

p { margin-top: 0; }

具有更具体选择器的规则将覆盖除序列中第一个元素之外的任何元素。

选择器div p:first-child不起作用，因为它匹配p元素，该元素是其父元素的第一个子元素和div元素的后代元素。在您的示例中，没有p元素是其父级的第一个子级。

Answer 2

您的示例中的

p不是第一个孩子，h3是。跟着：

div h3 + p {
    margin-top: 0;
}

Answer 3

伪类:first-child 并不表示该类型的第一个元素，即其父类的子元素。它的意思是其父级的第一个子元素。

我记得最初也很困惑，因为我期待:first-child = first。 @yabol（h3 + p）提出的解决方案将为您提供h3旁边的段落，在您的情况下，它是第一个<p>;但要小心，因为通过更改页面结构，您可能会丢失该特定样式。

要准确了解您的需求，您必须使用 CSS3 pseudo class :first-of-type 。尽管有支持（仅限IE9 +！）

，请小心