1

当我遇到一个奇怪的情况时，我正在玩 CSS 选择器。

如果我使用 :first-child 伪元素，我需要在它前面加上一个空格才能工作，如果我不这样做，它将无法工作。但是 :first-letter 伪元素的情况是相反的，它只有在没有空格的情况下才会起作用。

我发现它非常不一致，因为它们都是伪元素。最初我认为这可能只是 IE10 的问题，但我使用 Chrome 和 Firefox 进行了检查，结果相同。有什么我想念的吗？这种行为有原因吗？

这是重现问题的紧凑示例：

<!DOCTYPE html>
<html>
<head>
<style>
    * { color: red; }
    #article1 :first-child { color: deepskyblue; }
    article :last-child { color: darkmagenta; }
    #firstLetter:first-letter { color: darkslateblue; }
    #firstLine:first-line { color: darkslateblue; }
</style>
</head>
<body>
    <article id="article1">
        <div>E :first-child </div>
        <div>E :last-child </div>
    </article>                        
    <div id="firstLetter">:first-letter</div>
    <div id="firstLine">:first-line</div>
</body>
</html>
4

1 回答 1

6

您的困惑来自于:first-child和:last-child是伪类，而不是伪元素。它们中的每一个分别表示其父级的第一个和最后一个子级，但是您将它们附加到的元素代表子级，而不是父级。伪类是对某个元素的描述，如果您愿意的话，就像 ID 选择器描述具有该 ID 的元素或属性选择器描述具有该属性的元素一样。因此，选择器E:first-child意味着E它是其父级的第一个孩子——无论该父级可能是什么——但不是 E.

选择器#article1:first-child应该匹配#article1，因为它是 的第一个孩子body，但它不会匹配 的第div一个孩子。 匹配 ，因为它是第一个其父母恰好是 的孩子。#article1#article1 :first-childdiv#article1

另一方面，之所以有效:first-letter，是因为它们分别匹配每个元素的:first-line第一个字母和第一行。这就是伪元素的含义；作为某个其他元素的成员生成的虚拟元素（未在 DOM 中表示） 。

请注意，这并不意味着您可以或不能将空间与其中一个一起使用。您可以将任何组合器与任何伪类或伪元素选择器一起使用，或者将其附加到另一个简单选择器链。当使用或不使用组合器时，它们只是意味着不同的东西，这就是为什么你会看到不同的结果。

可以在此处找到伪类与伪元素的另一种解释。

如果您不需要支持 IE8 及更早版本，则应使用双冒号表示伪元素，以帮助您将它们与伪类区分开来，所以::first-letter和::first-line而不是:first-letterand :first-line。这个符号是在新的Selectors 模块中引入的。

于 2013-02-17T06:10:19.880 回答