可以在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:'@ ';}

Answer 3

当然你可以使用伪类。它们得到IE8及以上版本的支持。你可以检查你将在这里使用的任何伪类的兼容性http://caniuse.com/#search=after

如果您不想要一个点，只需在内容中使用空逗号，然后显示：block并指定高度和宽度。

menu li:before {
    content: "";

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

}