多個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 ... */ 
}