0Pricing
CSS Academy · 课时

:hover、:focus、:active 与 :visited

使用最常见的 CSS 伪类设置交互式链接和按钮状态的样式。

:hover、:focus、:active 与 :visited 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

什么是伪类

伪类根据元素的状态或其与其他元素的关系来选择元素。伪类以单个冒号 : 开头，无需向 HTML 添加属性。

:hover

:hover 会在用户的指针位于元素上方时应用。这是最常用的交互状态选择器。

<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>

:focus

:focus 会在元素获得焦点时应用（通过键盘 Tab 键或程序化聚焦）。这对可访问性至关重要。

<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>

:focus-visible

:focus-visible 是 :focus 的更智能版本——仅当元素通过键盘获得焦点时显示焦点环，而不是通过鼠标获得焦点时显示。这可以在不显示鼠标点击焦点环的情况下，为键盘用户提供焦点指示器。

<button autofocus>Keyboard-focused button shows a ring</button>

:focus-within

当元素的任意后代元素获得焦点时，:focus-within 会应用于该元素。元素处于活动状态时，它适合用于设置表单容器或搜索栏的样式。

<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>

:active

:active 会在元素正在被激活时应用，即鼠标点击或触摸期间。它可以为交互元素创建视觉反馈。

<button class="demo-active">Pressed button (demo state)</button>

:visited

:visited 会为用户已经访问过的链接设置样式。出于隐私方面的考虑，只有一组有限的属性可以与 :visited 一起设置样式（color、background-color、border-color、outline-color）。

<a href="#" class="demo-visited">Visited link</a>

链接状态顺序（LVHA）

设置全部四种链接状态的样式时，请遵循 LVHA 顺序，以避免特异性问题：Link（链接）、Visited（已访问）、Hover（悬停）、Active（活动）。

<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>

触摸设备上的悬停

触摸屏不像鼠标那样具有悬停状态。点击时可能会短暂激活 :hover。对于触摸专用的交互，请使用 :active 或 @media (hover: none) 媒体查询。

组合状态

可以将伪类串联起来，同时设置多种状态的样式：

<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>

过渡悬停状态

请在基础状态（而不是 :hover 状态）上使用过渡来实现平滑的悬停效果，这样过渡就能在两个方向上播放：

<button class="btn demo-hover">Hover transitions smoothly</button>

快速检查

哪个伪类只会为键盘导航显示焦点样式，而不会响应鼠标点击？

回顾

:hover 会在指针位于元素上方时激活；:focus 会在输入获得焦点时激活；:active 会在点击期间激活；:visited 用于已访问的链接。请使用 :focus-visible 创建仅适用于键盘的焦点环。请遵循 LVHA 链接状态顺序。为保证可访问性，请始终提供可见的焦点指示器。

常见问题解答

「:hover、:focus、:active 与 :visited」课时是免费的吗？

是的 — 「:hover、:focus、:active 与 :visited」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「:hover、:focus、:active 与 :visited」这节课中我会学到什么？

使用最常见的 CSS 伪类设置交互式链接和按钮状态的样式。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。

「:hover、:focus、:active 与 :visited」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. :hover、:focus、:active 与 :visited
  2. :nth-child 与 :nth-of-type
  3. :not()、:is() 与 :where()
  4. :checked、:disabled 与表单状态伪类
← 返回 CSS Academy