CSS不同的链接样式

Question

根据我的了解，使用类似以下的东西：

.class a {}

这句话的意思是：“和使用以下内容相同：”。

.class a:link {}

“对吧？”

“此外......以下两种样式是否相同？”

.class a:focus {}
.class a:hover {}

最后……下面的样式是当鼠标按下时的颜色，对吗？

.class a:active {}

- Brett

Answer 1

• a 是每个锚点元素。
• a:link 仅在超链接从未被访问过时使用。
• a:focus 是当您使用键盘在页面上切换焦点时使用的。
• a:hover 是当鼠标悬停在链接上时使用的。
• a:active 是当您按下鼠标点击链接时使用的。
• a:visited 是当您已经访问过该链接时使用的。

- Michael Irigoyen

---

a 和 a:link 不是同一件事。a 匹配任何 <a> 元素，而 a:link 只匹配未访问的超链接 <a> 元素。 - BoltClock

@BoltClock 感谢您的澄清。我已经更新了我的答案以反映这一点。 - Michael Irigoyen

Answer 2

• :link = 只显示你没点击过的链接
• :visited = 显示你已经点击过的链接
• :focus = 当元素处于焦点状态时，例如使用 tab 键时
• :hover = 当鼠标悬停在其上时
• :active = 刚刚点击的链接

- Black-Pixel