当我遇到一个奇怪的情况时，我正在摆弄 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>
您的困惑来自于以下事实：
:first-child:last-childE:first-child 意味着 Eof
E 的第一个子级。选择器
#article1:first-child应匹配
#article1bodydiv的第一个子级
#article1。 #article1 :first-child与
div匹配，因为它是第一个其父级恰好是
#article1的子级。
另一方面，
:first-letter 和 :first-line
可以工作，因为它们分别匹配每个元素的第一个字母和第一行。这就是
伪元素的含义；一个虚拟元素（未在 DOM 中表示），作为其他元素的成员生成。 请注意，这并不意味着您可以或不能与其中之一一起使用该空间。您可以将任何组合器与任何伪类或伪元素选择器一起使用，或将其附加到另一个简单选择器链。它们只是在使用或不使用组合器时含义不同，这就是为什么您会看到不同的结果。 可以在here找到伪类与伪元素的另一种解释。
如果不需要支持 IE8 及更早版本，则应使用双冒号表示伪元素，以帮助您将它们与伪类区分开，因此使用
::first-letter 和 ::first-line 而不是
:first-letter和
:first-lineSelectors 模块中引入。
:initial-letter
已在 Chrome/Edge/Safari 上可用，但尚未在 Firefox 上可用。