用类和伪类编写 CSS 选择器的正确方法是什么？答案

【问题标题】：What's the proper way to write a CSS selector with a class AND a pseudo class?用类和伪类编写 CSS 选择器的正确方法是什么？
【发布时间】：2010-07-21 10:04:09
【问题描述】：

简单问题：用类和伪类编写 CSS 选择器的正确方法是什么？

例如：

a.someclass:active {
  top:1px;
}

或

a:active.someclass {
  top:1px;
}

哪个是正确的？如果可能的话，你能给我一个这方面的资料吗——比如 W3C 参考资料？我试图找到它，但可惜我找不到。

【问题讨论】：

这个问题的选择答案是错误的，如它自己的链接所示
带有 :hover #2 是首选（对于 ie6）
PS - 感谢所有 stackoverflow 纳粹的帮助。 ;p

标签： css css-selectors

【解决方案1】：

它们都是正确的，虽然第一个更常见。

这是CSS grammar 中指定的内容。你可以看到.class和:pseudo选择器都被允许在同一个地方，还有#id和[attrib=val]选择器：

simple_selector
  : element_name [ HASH | class | attrib | pseudo ]*
  | [ HASH | class | attrib | pseudo ]+
  ;
class
  : '.' IDENT
  ;
pseudo
  : ':' [ IDENT | FUNCTION S* [IDENT S*]? ')' ]
  ;

【讨论】：

【解决方案2】：

~~第一个是~~两个都对

Selectors Level 3

【讨论】：

仅供参考，当我点击链接时，我发现这似乎支持第一个是正确的：w3.org/TR/css3-selectors/…（参见第一个示例）

【解决方案3】：

如果我正确理解documentation，两者都应该没问题：

在选择器中包含的所有简单选择器序列中都允许使用伪类。伪类允许在简单选择器序列中的任何位置，在前导类型选择器或通用选择器（可能被省略）之后。

【讨论】：