多个 CSS 伪类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/493232/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple CSS Pseudo Classes
提问by Brian Fisher
What is the proper CSS syntax for applying multiple pseudo classes to a selector. I'd like to insert "," after each item in a list except the last one. I am using the following css:
将多个伪类应用于选择器的正确 CSS 语法是什么。我想在列表中除最后一项之外的每一项之后插入“,”。我正在使用以下 css：
ul.phone_numbers li:after {
content: ",";
}
ul.phone_numbers li:last-child:after {
content: "";
}
This works fine on FF3, Chrome and Safari 3. IE7 doesn't work because it doesn't support :after (as expected). In IE 8 this renders with a comma after each li including the last one. Is this a problem with IE8 or is my syntax incorrect? It's ok if it doesn't work in IE8 but I would like to know what the proper syntax is.
这在 FF3、Chrome 和 Safari 3 上运行良好。IE7 不起作用，因为它不支持 :after（正如预期的那样）。在 IE 8 中，这在每个 li 之后用逗号呈现，包括最后一个。这是 IE8 的问题还是我的语法不正确？如果它在 IE8 中不起作用也没关系，但我想知道正确的语法是什么。
回答by Christoph
:last-childis a pseudo-class, whereas :after(or ::afterin CSS3) is a pseudo-element.
:last-child是一个伪类，而:after（或::after在 CSS3 中）是一个伪元素。
To quote the standard:
引用标准：
Pseudo-classes are allowed anywhere in selectors while pseudo-elements may only be appended after the last simple selector of the selector.
伪类可以出现在选择器中的任何地方，而伪元素只能附加在选择器的最后一个简单选择器之后。
This means your syntax is correct according to CSS2.1 and CSS3 as well, i.e. IE8 still sucks ;)
这意味着您的语法根据 CSS2.1 和CSS3也是正确的，即 IE8 仍然很糟糕；)
回答by Gumbo
You could use the adjacent sibling selector:
您可以使用相邻的兄弟选择器：
ul.phone_numbers li + li:before {
content: ",";
}
回答by DonutReply
You can get around this by having a another tag inside the <li/>and apply the :afterto that instead. That way you would be applying the :last-childand :afterto different elements:
您可以通过在 中添加另一个标签<li/>并将其应用于该标签来解决此问题:after。这样你就可以将:last-child和:after应用于不同的元素：
ul.phone_numbers li > span:after {
content: ",";
}
ul.phone_numbers li:last-child > span:after {
content: "";
}
回答by big kev
There is no problem nesting pseudo class selectors as long as the rules applied match the particular element in the DOM-tree . I want to echo the possibilities of styling with pseudo class selectors from w3 website. That means you can also do stuff like :
只要应用的规则与 DOM-tree 中的特定元素匹配，嵌套伪类选择器就没有问题。我想用来自w3 网站的伪类选择器来回应样式的可能性。这意味着您还可以执行以下操作：
.ElClass > div:nth-child(2):hover {
background-color: #fff;
/*your css styles here ... */
}
回答by roborourke
IE8 doesn't support last-child :( They're focused on sorting out CSS 2.1 support it looks like. Why microsoft haven't adopted Gecko or Webkit yet I don't know.
IE8 不支持 last-child :( 他们专注于整理 CSS 2.1 支持它看起来像。为什么微软还没有采用 Gecko 或 Webkit 我还不知道。
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoclasses
http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx#pseudoclasses
