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ますが、達成するには別の疑似要素内に実際の要素が必要です。たとえば、::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

私の構文は間違っていますか、それとも疑似要素内の疑似要素はサポートされていませんか?

私があなたを正しく理解していれば、それは不可能です。セレクター レベル 3の時点で、複数の疑似要素をチェーンすることはできませんが、将来的には許可される可能性があります。

セレクターごとに 1 つの疑似要素のみを表示できます。存在する場合は、セレクターのサブジェクトを表す一連の単純なセレクターの後に表示する必要があります。注:この仕様の将来のバージョンでは、セレクターごとに複数の疑似要素が許可される可能性があります。

興味深いことに、& /疑似要素をプレースホルダー疑似要素と連鎖させることができます。::first-letter::before::after

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

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

于 2013-07-25T20:59:39.733 に答える