8 
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伪元素，尽管我需要另一个伪元素中的实际元素来实现，例如 where::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。

4

1 回答 1

14

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

如果我理解正确，那是不可能的。从Selectors Level 3开始，您不能链接多个伪元素，尽管将来可能会允许这样做。

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

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

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

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

于 2013-07-25T20:59:39.733 回答