Question

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

如果我使用：first-child伪元素我需要在它前面添加一个空间让它工作，如果我不这样做就行不通。但是：第一个字母的伪元素情况是反向的，它只有在它没有被空格前置时才会起作用。

我发现它非常不一致，因为它们都是伪元素。最初我认为它可能只是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>

Answer 1

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

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

另一方面，:first-letter和:first-line有效，因为它们分别与每个元素的第一个字母和第一行匹配。这就是pseudo-element的意思;一个虚拟元素（未在DOM中表示），作为 的其他元素生成。

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

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

如果您不需要支持IE8及更早版本，则应使用双冒号表示伪元素以帮助您将它们与伪类区分开来，因此::first-letter和::first-line代替{{ 1}}和:first-letter。新表达式Selectors module中引入了这种表示法。

令人困惑的伪元素语法：first-child和：first-letter

1 个答案: