cssで複数の疑似要素を使用しても大丈夫ですか？

Question

各項目を・で区切ったメニューを作りたいです。これを達成するために私は使用します

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：

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