多个 CSS 伪类答案

【问题标题】：Multiple CSS Pseudo Classes多个 CSS 伪类
【发布时间】：2009-01-29 20:21:05
【问题描述】：

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

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

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

这在 FF3、Chrome 和 Safari 3 上运行良好。IE7 不起作用，因为它不支持 :after（如预期的那样）。在 IE 8 中，这在每个 li （包括最后一个）之后用逗号呈现。这是 IE8 的问题还是我的语法不正确？如果它在 IE8 中不起作用也没关系，但我想知道正确的语法是什么。

【问题讨论】：

标签： css syntax

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

你可以使用adjacent sibling selector:

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：

【解决方案5】：

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

【讨论】：