CSSで複数の擬似要素を使用することはできますか？

Question

私は各項目がaで区切られたメニューを作っています。これを実現するには

menu li:before { 
    content: "· "; 
} 

これは膨らみますが、最初の項目の前にもドットが生成されます。したがって、私は:first-child疑似クラスを使用したいと思います。これはできますか？

Answer 1

あなたができることを確認 - http://jsfiddle.net/WQBxk/

p:before { 
    content: "BEFORE "; 
    display: block; 
} 

p:first-child:before { 
    content: "1ST"; 
    display: block 
} 
​ 

悪い - それは、以下のIE7で動作しません。複数の擬似セレクタのためではなく、非サポートのため:before - http://kimblim.dk/css-tests/selectors/

ちょうどIE8でテストされています。ここで

Answer 2

は作業フィドルです：http://jsfiddle.net/surendraVsingh/zRrLF/

<ul> 
<li>lorem</li> 
<li>lorem</li> 
<li>lorem</li> 
<li>lorem</li> 
<li>lorem</li> 
<li>lorem</li> 

</ul>​ 

CSS：あなたは擬似classes.Theyを使用することができます。もちろん、

li:before{content:'. ';} 
li:first-child:before{content:'@ ';} 

Answer 3

は非常によくIE8とup.Youからサポートされてチェックすることができますここで使用する疑似クラスの互換性http://caniuse.com/#search=after

ドットjを使用したくない場合コンテンツに空のカンマを使用してからdisplay：blockを実行し、heightとwidthも指定してください。

menu li:before { 
    content: ""; 

    display:block; 
    width:50px; 
    height:50px; 
    background:red; 

}