如何正确地为具有类的链接设置Hover/Focus/Visited样式？

Question

如何正确地指定具有类的链接的悬停/聚焦/访问状态？

a:focus.class{}

或者

a.class:focus{}

两种方法都可以，只是想知道哪种被认为是正确的方式。

- Probocop

Answer 1

两种写法都是正确的，因为伪类可以出现在任何位置。

来自CSS2规范：

伪类可以出现在选择器的任何位置，而伪元素只能附加在选择器的最后一个简单选择器之后。

个人而言，我更喜欢第二种写法，主要是出于可读性考虑，同时也可能会随着代码的变化而改变，例如 :hover，所以我更喜欢将所有静态内容放在动态内容之前，而不是混合在一起...这样更有意义，我想。

- Nick Craver

Answer 2

根据CSS2.1规范，两者都可以：

：

简单选择器可以是类型选择器或通用选择器，后面紧跟零个或多个属性选择器、ID选择器或伪类选择器，顺序任意。

但是伪元素(:after, :before)只能在最后出现，

伪类选择器可以出现在选择器的任何位置，而伪元素只能附加在选择器的最后一个简单选择器之后。

个人认为，将伪类选择器放在最后也是可行的，因为这样可以提高可读性。

- Mario Menger

Answer 3

我在规范中找到的唯一例子是这个：

a.external:visited { color: blue }

像Nick一样，我更喜欢这种方式。

- Skilldrick

Answer 4

我认为为了可读性，我会使用第二个。在维护期间，首先声明伪类可能很容易被忽略。

- Shaun

Answer 5

我个人使用第二种方式，以下是我的看法：

你必须考虑语义，你应该说：

"当类<class>的<a>触发事件<hover>时，我希望发生<that>。"

而不是：

"当<a>触发事件<hover>时，请检查它是否属于类<class>，然后执行<that>。"

- Dominique