Question

我从w3-schools那里拿了这个例子（参见link）。如果我将p:first-child定义为具有这样的黄色背景：

<!DOCTYPE html>
<html>
<head>
    <style>
        p:first-child {
            background-color:yellow;
        }
    </style>
</head>

<body>
    <p>This paragraph is the first child of its parent (body).</p>

    <h1>Welcome to My Homepage</h1>
    <p>This paragraph is not the first child of its parent.</p>

    <div>
        <p>This paragraph is the first child of its parent (div).</p>
        <p>This paragraph is not the first child of its parent.</p>
    </div>

</body>
</html>

一切正常，This paragraph is the first child of its parent (body).以及This paragraph is the first child of its parent (div).获得黄色背景。

但是当我在第一个p元素之前添加标题时，就像这样：

...
<body>

    <h1>test</h1>
    <p>This paragraph is the first child of its parent (body).</p>
...

.. This paragraph is the first child of its parent (body).不再获得黄色背景。

为什么呢？我将CSS样式应用于所有第一个p元素。当我添加标题时，此后的p元素显然仍然是第一个p元素。为什么它不起作用？

Answer 1

它仍然是第一个p元素，但它不再是第一个子元素（如示例文本所述）。当您向上添加标题时，该标题将成为第一个孩子。

如果您想要每个父级中的第一个p元素而不管其整体位置，请改用p:first-of-type。

Answer 2

p:first-child表示选择其父级的第一个子级，当且仅当它是p元素时。

您想要p:first-of-type，这意味着选择第一个子p元素。

More on first-child from MDN

：first-child CSS伪类表示任何元素其父母的第一个子元素。

vs first-of-type

：第一个类型的CSS伪类代表了第一个兄弟它在父元素子元素列表中的类型。

Answer 3

请尝试p:first-of-type。我相信，使用p:first-child选择也 父元素的第一个孩子的任何p个元素。当您在h1元素前添加p元素时，h1成为第一个子元素，因此p:first-child不再有效。

Answer 4

p:first-child实际上是指任何元素，它是其父元素的第一个子元素。

当您添加<h1>时，您正在进行此操作，以便不再是第一个孩子。

您可能希望改为使用p:first-of-type。

Answer 5

我用这种方式来解决（只是为了确保与旧浏览器兼容）：

p:first-child,
h1 + p {
    background-color:yellow;
}

这样你就可以处理所有第一个子段落和每个h1之后的所有段落（如果你想更具体一点，你可以在这种情况下将选择器改进为“body＆gt; h1 + p” “）

关于特定元素的CSS`：first-child`

5 个答案: