css - 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以下では動作しません。複数の疑似セレクターが原因ではなく、サポートされていないためです-http :before: //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:'@ ';}

Answer 3

もちろん、疑似クラスを使用することもできます。IE8以降で非常によくサポートされています。使用する疑似クラスの互換性は、http： //caniuse.com/#search=afterで確認できます。

ドットが必要ない場合は、コンテンツに空のコンマを使用してから、display：blockを使用し、高さと幅も指定します。

menu li:before {
    content: "";

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

}