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 及以下版本中不起作用。不是因为多个伪选择器，而是因为不支持: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

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

menu li:before {
    content: "";

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

}