正在加载...

CSS 伪类

标签、class、id、属性选择器你已经会了。还差一层：有时不想永远同一种样子，而想在指针停在按钮上、用 Tab 进到输入框、或链接已经打开过时换外观。这时用伪类——不必在 HTML 里再造新 class。

伪类是什么意思？

伪类是用一个冒号（:）接到选择器上的关键字。HTML 里看不到 class="hover" 这类东西。条件成立时浏览器才启用规则：指针悬停、焦点、链接历史，或在父元素子女中的位置。

常用伪类

先学这些。名字还有很多，但做 UI 入门通常够用。

📊 日常 CSS 伪类

伪类 何时生效 示例
:hover 指针在元素上 a:hover
:focus 元素有焦点（键盘或点击） input:focus
:visited 链接已被访问（有隐私限制） a:visited
:first-child 元素是父元素的第一个子元素 li:first-child
:nth-child(n) 第 n 个子元素，或奇/偶 tr:nth-child(odd)
:disabled 表单控件被禁用 button:disabled

悬停 — :hover

用 :hover，指针在元素上时外观会变。按钮和链接靠小变化显得有活力——而不是布局乱跳。

悬停 — 按钮反馈

css
CSS Code 
button:hover {
background-color: #0f766e;
color: #fff;
}

关于悬停

变化要温和。触控几乎没有真正悬停；别把关键信息只放在 :hover 里。

焦点 — :focus

:focus 选中当前活动的元素——例如用 Tab 到达。没有清晰焦点环，键盘用户会在表单里迷路。

焦点 — 输入框上清晰的环

css
CSS Code 
input:focus {
outline: 2px solid #0f766e;
outline-offset: 2px;
}

悬停与焦点都要有

悬停给指针用。焦点表示「这个控件现在是活动的」。没有同等清晰的替代时，不要删掉 outline。

已访问链接 — :visited

:visited 给浏览器认为已打开过的链接上色。通常只能改颜色（以及很少属性）。别指望改 padding 或布局——隐私会限制。

已访问 — 柔和的链接色

css
CSS Code 
a:visited {
color: #6b21a8;
}

链接状态的书写顺序

若一起写多种状态，常见安全顺序是：link → visited → hover → focus（有时记作 LVHA）。这样已访问链接上仍能看到悬停和焦点。

第一个子元素 — :first-child

:first-child 表示该元素是父元素的第一个子元素——不是「整页任意位置的第一个 li」，而是同一父元素下兄弟中的第一个。

第一个子元素 — 突出列表首项

css
CSS Code 
li:first-child {
font-weight: 700;
}

下一步：:nth-child

用 :nth-child(odd) 或 :nth-child(3) 可做斑马纹或「每隔三个」。先把 :first-child 学稳，再学这些模式。

好习惯

  • 伪类 = 一个冒号（:hover）；伪元素 = 两个（::）——下一课
  • 交互悬停务必配清晰的 :focus
  • visited 颜色保持克制
  • 用 Tab 也测一遍，别只靠鼠标

自己动手

  1. 短页面：<button>、<input>、几个链接，以及含三个 <li> 的 <ul>。
  2. 写上 button:hover { background-color: #0f766e; color: #fff; }，把鼠标移到按钮上。
  3. 写上 input:focus { outline: 2px solid #0f766e; }，用 Tab 进入字段。
  4. 写上 a:visited { color: #6b21a8; }，打开链接再返回。
  5. 写上 li:first-child { font-weight: 700; }——只有第一项变粗。

常见错误

  • 写成 ::hover 而不是 :hover——双冒号给伪元素用
  • 做了悬停却删掉焦点 outline 且无替代
  • 指望 :visited 对任意属性都自由
  • 以为 p:first-child 是「页面任意处的第一个段落」
  • 把重要文字只放在 :hover 里，触控用户永远看不见

小结

  • 伪类用一个冒号按状态或位置选择
  • :hover 与 :focus 提供反馈；两者都要保留
  • :visited 在浏览器限制内给已打开链接上色
  • :first-child 取第一个子元素；:nth-child 是下一步
  • 单冒号 = 伪类；双冒号 = 伪元素
  • 用鼠标、Tab 和短列表练习

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Css 教程