代码片段 → CSS → 链接伪类（按顺序） 链接伪类（按顺序） Chris Coyier 于 2022 年 1 月 10 日 a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:focus { outline: 1px solid blue; } a:active { color: yellow ;} 链接、访问、悬停、激活L、V、H、ALoVe、HAte 但这缺少“焦点”状态，所以不妨试试这样想 “Lord Vader Hates Fluffy Animals”
请注意，悬停对使用键盘而不是鼠标的用户不起作用。
为了使此效果可供键盘访问，您还必须使用焦点伪类。当用户将选项卡切换到链接时，此类将被激活。
当您不包含焦点伪类并在链接上使用 outline: 0; 时，键盘用户甚至无法看到哪个链接被激活，这会导致键盘用户体验不佳。
a:focus {color: green;}大多数情况下，将相同样式应用于悬停和焦点是有意义的，以确保鼠标用户和键盘用户都看到相同的效果。
此外，您可以通过添加活动伪类来确保效果具有更好的跨浏览器兼容性（因为 Internet Explorer 对伪类的处理方式不同）。当用户实际点击链接时，链接会在很短的时间内变为活动状态。
a:hover,a:focus,
a:active {color:red;}
活动伪类还可以用于在用户点击链接的短暂时间内创建特殊的按钮按下效果。
通过将链接向右移动 1 像素，向下移动 1 像素，当单击时，链接将看起来像按钮一样被按下。
a:active {position:relative;top:1px;left:1px;}:link 的目的是简单地为具有 href 属性的任何内容设置样式吗？例如，它不会影响诸如
Test之类的东西这是一个人们没有意识到的事情。为什么我的链接没有正确设置样式？检查您的顺序！
顺便说一句，Coyier 先生，这是网络上最好的 CSS 网站之一。了不起的成就，兄弟。
您的“LoVe、HAte”提醒非常有用。这就像 css 的“SohCahToa”
我使用“Lord Vader’s Handle Formerly Anakin”作为链接伪类的排序助记符
:link, :visited, :hover, :focus, :active
我使用“Lord Vader Hates Furry Animals”作为助记符。这些动物是伊沃克人 :P
谢谢，Jean，我记得这个！
谢谢，Jean，关于 LoVe HAte 的想法很好
Hilbrand Edskes
Re
a:active {position:relative;top:1px;left:1px;}
这太棒了，现在已经成为我的 CSS 中的永久添加项。
(...哎呀... 我想我应该遵循版主的建议，并“冷静一点”，所以...)
“酷。”
就是这样，Hilbrand。“酷。”
...真他妈酷。我喜欢它。
你忘了 :focus。
L、V、H、F、A
Leftover Vanilla Hot Fudge Anything