demo

Question

我们可以使用这样的伪元素：

div:before{
    content: "pseudo!";
    position: absolute;
    right: 200px;
}

但是对于那个伪元素，我想装饰这样的第一个字母：

div:before:first-letter{
    font-size: 26px;
    color: red;
}

但是它已经不再适用了。为什么呢？

Answer 1

因为the spec每个选择器只允许一个伪元素：

每个选择器只能出现一个伪元素，如果存在，它必须出现在代表选择器主体的简单选择器序列之后。 注意：此规范的未来版本可能允许每个选择器使用多个伪元素。

Answer 2

来自doc：

伪元素创建超出文档语言指定的文档树的抽象。例如，文档语言不提供访问元素内容的第一个字母或第一行的机制。

但如果您需要完全相同，则可以单独使用两个伪元素，如下所示：

div:before{
    content: "p";
    position: absolute;
    right: 240px;
    top: 0;
    font-size: 26px;
    color: red;
}
div:after{
    content: "seudo!";
    position: absolute;
    right: 200px;
}

为什么我不能在伪元素中使用伪元素？

2 个答案:

demo