Question

将多个伪类应用于选择器的正确CSS语法是什么。我想在列表中的每个项目之后插入“，”，除了最后一个。我使用以下css：

ul.phone_numbers li:after {
    content: ",";
}

ul.phone_numbers li:last-child:after {
    content: "";
}

这适用于FF3，Chrome和Safari 3. IE7不起作用，因为它不支持：之后（正如预期的那样）。在IE 8中，在每个li之后使用逗号进行渲染，包括最后一个。这是IE8的问题还是我的语法不正确？如果它在IE8中不起作用，但我想知道正确的语法是什么，这没关系。

Answer 1

:last-child是一个伪类，而:after（或CSS3中的::after）是一个伪元素。

允许在选择器中的任何位置使用伪类，而伪元素只能在选择器的最后一个简单选择器之后附加。

这意味着你的语法根据CSS2.1和CSS3 as well是正确的，即IE8仍然很糟糕;）

Answer 2

ul.phone_numbers li + li:before {
   content: ",";
}

Answer 3

您可以通过在<li/>中添加另一个标记来解决此问题，并将:after应用于此标记。这样您就可以将:last-child和:after应用于不同的元素：

ul.phone_numbers li > span:after {
    content: ",";
}

ul.phone_numbers li:last-child > span:after {
    content: "";
}

Answer 4

只要应用的规则与DOM树中的特定元素匹配，嵌套伪类选择器就没有问题。我想用w3 website来回应使用伪类选择器设置样式的可能性。这意味着您还可以执行以下操作：

.ElClass > div:nth-child(2):hover {
    background-color: #fff;
    /*your css styles here ... */
}

Answer 5

IE8不支持last-child :(他们专注于整理CSS 2.1支持它。为什么微软还没有采用Gecko或Webkit但我不知道。