一个伪元素是否可以在另一个伪元素中？

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。

- Gajus

---

请查看此帖子 https://dev59.com/RGox5IYBdhLWcg3wvWsy - Danield

因为您正在进行“绝对”定位，所以没有理由不使用“:after”，只需要根据“:before”的位置计算出它的位置（请参见http://jsfiddle.net/dBj3c/4/，该示例将“:after”放置在它实际上应该是一个基于您上面的代码的“:before:before”）。 - ScottS

Answer 1

我的语法有误还是不支持伪元素内伪元素？

如果我理解正确，是不可能的。根据选择器Level 3，你不能链接多个伪元素，尽管未来可能允许。

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

有趣的是，您可以将::first-letter & ::before / ::after伪元素与占位符伪元素链结在一起，例如：

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

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

- Adrift

---

“一旦浏览器采用了选择器4级，这似乎将被允许。” —— 选择器4级目前也不允许多个伪元素：http://dev.w3.org/csswg/selectors4/#pseudo-elements。 - Paul D. Waite

@Paul D. Waite：确实如此，但考虑到它是一个 WD，在它成为 CR 或更进一步之前可能会发生变化。不过感谢你指出这一点。 - Adrift

我认为像这样的行有时会被放在W3C规范中，相当于是一种推测（即并非由于实际计划来实现它们所描述的内容），但我也没有任何实际的知识证明。 - Paul D. Waite

@Paul, Adrift：早在生成内容级别3（http://www.w3.org/TR/css3-content/#nesting）时就已经探讨过了。然而，不用说，它从未起飞。还要注意模块的老化程度——如果它没有等待重写，那么它可能已被放弃。 - BoltClock