gpt4 book ai didi

html - 令人费解的伪元素语法 :first-child and :first-letter

转载 作者:行者123 更新时间:2023-11-28 05:01:07 28 4
gpt4 key购买 nike

当我遇到一个奇怪的情况时,我正在研究 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-childpseudo-classes 的事实,不是伪元素。它们中的每一个分别表示其父元素的第一个和最后一个子元素,但是您将它们附加到的元素表示子元素,而不是父元素。伪类是对某个元素的描述,如果您愿意的话,就像 ID 选择器描述具有该 ID 的元素或属性选择器描述具有该属性的元素一样。因此,选择器 E:first-child 表示 E 是其父项的第一个子项(无论该父项是什么),但不是 E.

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

另一方面,:first-letter:first-line 可以工作,因为它们匹配每个 的第一个字母和第一行元素分别。这就是 pseudo-element 的意思;一个虚拟元素(未在 DOM 中表示)作为其他元素的成员生成。

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

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

如果你不需要支持 IE8 及更早版本,你应该使用双冒号表示伪元素以帮助你将它们与伪类区分开来,所以 ::first-letter::first-line 而不是 :first-letter:first-line。此符号在新的 Selectors module 中引入。 .

关于html - 令人费解的伪元素语法 :first-child and :first-letter,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14918397/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com