是否有可能在伪元素中有一个伪元素？

Question

div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; width: 75px; height: 75px; background: #0f0; }
div::before::before { position: absolute; content: ''; width: 50px; height: 50px; background: #00f; }

我的语法错误还是伪元素中的伪元素不受支持？

请注意,我知道::after伪元素,虽然我需要在另一个伪元素中实现一个实际元素,例如,哪里::after不足够:

div { position: relative; width: 100px; height: 100px; background: #f00; }
div::before { position: absolute; content: ''; right: 0; bottom: 0; width: 75px; height: 75px; background: #0f0; }
div::after { position: absolute; content: ''; left: 0; top: 0; width: 50px; height: 50px; background: #00f; }

因为::after是相对于元素而不是::before.

Answer 1

我的语法错误还是伪元素中的伪元素不受支持？

如果我理解正确,那是不可能的.您不能将选择器级别3中的多个伪元素链接起来,尽管将来可能会允许它们.

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

有趣的是,您可以使用占位符伪元素链接::first-letter&::before/ ::afterpseudo-elements,例如

::-webkit-input-placeholder::first-letter {
color: purple;  
}

http://jsfiddle.net/k3yb6/1/