在css中使用多个伪元素可以吗？答案

【问题标题】：Is it ok to use multiple pseudo-elements in css?在css中使用多个伪元素可以吗？
【发布时间】：2012-06-25 11:40:16
【问题描述】：

我想制作一个菜单，其中每个项目都用·分隔。为此，我使用

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

这很膨胀，但它也会在第一项之前生成一个点。因此，我也想使用:first-child 伪类。我可以这样做吗？

【问题讨论】：

【解决方案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 中测试过 - 运行良好。

【讨论】：

可以使用多个伪类，但不能使用多个伪元素。这就是两者之间的区别变得重要的地方（并且使用术语“伪选择器”可能会导致潜在的混淆）。
嘿，我本来打算问一个类似的问题，但后来我看到这个问题使用多个伪类，所以我决定在这些 cmets 中问我的问题。 Here 是我的小提琴。我希望它显示“无效的电子邮件！”如果它确实是无效的电子邮件和“有效的电子邮件！”，则显示为红色。如果它是有效的电子邮件，则为绿色。是不是我做错了什么？

【解决方案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:'@ ';}

【讨论】：

【解决方案3】：

当然你可以使用伪类。IE8 及更高版本都很好地支持它们。你可以在这里检查你要使用的任何伪类的兼容性http://caniuse.com/#search=after

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

menu li:before {
    content: "";

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

}

【讨论】：