多个CSS伪类

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(或::after在CSS3中)是一个伪元素.

引用标准:

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

这意味着你的语法也是正确的,根据CSS2.1和CSS3,即IE8仍然很糟糕;)

Answer 2

您可以使用相邻的兄弟选择器:

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

Answer 3

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

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