html - CSS：当元素之前有另一个元素时，第一个孩子的意外结果

Question

我正在尝试为除第一个以外的所有段落元素设置 20px 的边距顶部。我有这个代码：

    <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;
}

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

谢谢！！！

score 4 · Accepted Answer

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

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

如果您还希望将p序列中第一个元素的边距顶部设置为零，看起来，只需添加

p { margin-top: 0; }

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

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

score 2 · Accepted Answer

p在你的例子中不是第一个孩子，h3是。一起去：

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

score 2 · Accepted Answer

伪类:first-child并不表示该类型的第一个元素是其 parent 的子元素。它更确切地说是其 parent 的第一个子元素。

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

要准确实现您正在寻找的内容，您必须使用CSS3 伪类:first-of-type。小心支持（仅限 IE9+！）

3 回答 3