多个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中，每个包含最后一个元素后都会用逗号来表示。这是IE8的问题还是我的语法不正确？没关系，如果它在IE8中不起作用，但我想知道正确的语法是什么。

Answer 1

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

引述the standard：

伪类在任何地方选择允许而伪元素只可以在选择的最后一个简单选择后追加。

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

Answer 2

IE8不支持最后孩子:(他们专注于整理出来的CSS 2.1支持它看起来像。为什么微软没有采用壁虎或Webkit的但我不知道。

http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoclasses

Answer 3

你可以使用adjacent sibling selector：

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

Answer 4

可以解决这个问题通过具有<li/>内的另一标签并应用:after到代替。这样，你会被应用:last-child和:after到不同的元素：

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

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

Answer 5

有嵌套伪类选择，只要应用匹配的DOM树的特定元素的规则没有问题。 我想回复从w3 website伪类选择器造型的可能性。 这意味着你也可以做类似的东西：

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