在CSS中使用多个伪元素是否可行？

Question

我想制作一个菜单，其中每个项目用·分隔。为了实现这一目的，我使用

。

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

这很不错，但它也在第一项前面生成了一个点。因此，我想同时使用:first-child伪类。我可以这样做吗？

- Himmators

---

在现代浏览器中运行良好。我曾经使用过hover和after类，它也起作用了。 - SVS

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中测试过，运行良好。

- Zoltan Toth

---

你可以使用多个伪类，但不能使用多个伪元素。这就是两者之间的区别变得重要的地方（而使用术语“伪选择器”可能会导致潜在的混淆）。 - BoltClock

嘿，我本来想问一个类似的问题，但是后来看到了这个使用多个伪类的问题，所以我决定在这些评论中问我的问题。这里是我的代码片段。如果它确实是无效的电子邮件，则希望以红色显示“Invalid email！”；如果它是有效的电子邮件，则以绿色显示“Valid email！”。我做错了什么吗？ - NathanielSantley

Answer 2

这里是可用的 fiddle: 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:'@ ';}

- SVS

Answer 3

当然可以使用伪类。它们在IE8及以上版本中得到了很好的支持。您可以在此处检查要使用的任何伪类的兼容性 http://caniuse.com/#search=after

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

menu li:before {
    content: "";

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

}

- Tomas