伪元素中是否有伪元素？

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; }

是我的语法错误还是pseudo-element内的伪元素不被支持？伪元素中是否有伪元素？

请注意，我知道::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。

来源

2013-07-25 Gajus

看到这个帖子http://stackoverflow.com/q/9007546/703717 – Danield

因为你正在做的'absolute'定位，没有理由不使用'：after'，它只需要将它的位置在某些方面计算到'：before'的位置（参见http://jsfiddle.net/dBj3c/4/，它将'：after'放在哪里，如果它实际上可能是根据你的代码在'before：before'之前）。 – ScottS

是我的语法错误还是pseudo-element内的伪元素不被支持？

如果我理解正确，那是不可能的。尽管它显然可能在将来被允许，但您不能链接多个伪元素（从Selectors Level 3开始）。

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

有趣的是，你能链的::first-letter & ::before/::after伪元素与占位符伪元件，例如

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

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

来源

2013-07-25 20:59:39 Adrift

“一旦选择器级别4被浏览器采用，它显然会被允许” - 选择器级别4目前不允许多个伪元素：http://dev.w3.org/csswg/selectors4/#pseudo-元素。 –

@Paul D. Waite：确实如此，但考虑到它是一个WD，到CR或更远的时候它可能会发生变化。谢谢你指出，虽然。 – Adrift

确实。我认为这样的行有时候被放在W3C规范中的推测性很强（即不是由于实现了他们描述的实际计划），但是我没有任何实际的知识。 –

伪元素中是否有伪元素？

回答

相关问题