CSS 链接样式 🎨 1. :hover 2. :active 3. :visited 4. :focus 5. :focus-within 6. :focus-visible

2025-06-10

CSS 链接样式 🎨

1. :hover

2. :active

3. :访问

4. :focus

5. :focus-within

6. :focus-visible

使用CSS，可以以多种不同方式设置链接样式。

我们可以改变CSS 链接作为：

  1. ：徘徊
  2. ：积极的
  3. :访问过
  4. ：重点
  5. :focus-within
  6. :focus-visible

1. :hover

:hover当用户将光标悬停在元素上时触发 CSS 伪类。

a:hover {
    color: red
}
Enter fullscreen mode Exit fullscreen mode

如果您使用 :link、:visited、:active，请记住按照 LVHA 顺序在 link 和 visitor 后添加 hover：: link — :visited — :hover — :active。

2. :active

:active当用户按下鼠标主按钮时，CSS 伪类开始启动。

a:active {
    color: blue;
}
Enter fullscreen mode Exit fullscreen mode

伪类:active通常用于<a>和<button>元素。

3. :访问

:visited CSS 伪类代表用户已经访问过的链接。

a:visited {
    color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

4. :focus

:focus CSS 伪类表示某个元素（例如表单输入框）已获得焦点。它通常在用户点击或轻触某个元素，或使用键盘的 Tab 键选中该元素时触发。

input:focus {
    background-color: green;
}
Enter fullscreen mode Exit fullscreen mode

注意📝切勿删除焦点轮廓

查看您玩的代码笔并了解hover、active和visited如何focus工作。

5. :focus-within

:focus-within CSS 伪类表示一个元素，该元素本身与 :focus 伪类匹配，或者具有与 :focus 匹配的后代。

div:focus-within {
    background: cyan;
}
Enter fullscreen mode Exit fullscreen mode

6. :focus-visible

伪:focus-visible类适用于根据用户的输入方式（鼠标与键盘）提供不同的焦点指示器。

.focus-visible:focus-visible {
    background: pink;
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

为什么我们需要:focus-visible？

:focus也能这么做对吧？🤔
但有一个问题。假设你想移除某些按钮或链接的轮廓。那么对于那些试图通过键盘访问的用户来说，这就会有点麻烦。

这里我们可以使用:focus-visible，它适用于您真正想要一个视觉指示器来帮助用户看到焦点的情况。

在这里查看代码笔👇

参考🧐

给我买杯咖啡

🌟推特 👩🏻‍💻suprabha.me​ 🌟 Instagram
鏂囩珷鏉ユ簮锛�https://dev.to/suprabhasupi/css-link-style-2nh2
Devto 翻译
PREV
如何拥有一个很棒的 GitHub 个人资料？功能快速入门关于排名 Spotify 最近播放的自述文件 GitHub 个人资料浏览计数器博客文章工作流程自述文件笑话 Github 自述文件引述自述文件中的开发指标，并添加了功能标志🎌 很棒的 GitHub 个人资料自述文件注意：此存储库不包含在 Hacktoberfest 活动中，因为它仅用于练习！
NEXT
爱就是爱。庆祝它！🏳️‍🌈