Ceryn

CSS 伪类

7分钟阅读

活跃分钟 0访问量 0点赞量 0点击量 0

网站

CSS 伪类

CSS 伪类 | MDN

引入

网页中的元素不只有静态的显示效果，还会根据用户的操作或者在文档中的位置进入不同的状态。

例如，鼠标移到链接上时链接会高亮，表单输入框获得焦点时会显示边框，列表中的第一个项目可能需要特殊样式。

CSS 伪类就是用来选中元素的这些特定状态或位置的。

正文

定义

定义

伪类是特殊的 CSS 关键字，允许你根据元素的特定状态或位置选择元素，然后给这些元素添加样式。

伪类写在选择器后面，用冒号 : 开头。

选择器:伪类 {
  属性: 属性值;
}

例如：

a:hover {
  color: red;
}

这条规则表示：当鼠标移到链接上时（:hover 状态），链接文字变成红色。

伪类的分类

CSS 伪类可以按功能分为几类：

交互状态伪类

根据用户的操作选中元素。

  • :hover：鼠标移到元素上时
  • :active：鼠标点击元素时
  • :focus：元素获得焦点时

链接伪类

专门用于链接元素的状态。

  • :link：未访问的链接
  • :visited：已访问的链接

输入伪类

用于表单元素的输入状态。

  • :checked：选中的复选框或单选按钮
  • :disabled：禁用的表单元素
  • :enabled：可用的表单元素
  • :focus：获得焦点的表单元素
  • :valid：内容有效的表单元素
  • :invalid：内容无效的表单元素

结构伪类

根据元素在文档树中的位置选中元素。

  • :first-child：父元素的第一个子元素
  • :last-child：父元素的最后一个子元素
  • :nth-child(n)：父元素的第 n 个子元素
  • :only-child：父元素的唯一子元素

其他常用伪类

  • :not()：选中不符合条件的元素
  • :target：选中当前 URL 锚点指向的元素
  • :root：选中文档根元素

例子

链接交互效果

<a href="https://example.com">这是一个链接</a>
/* 未访问的链接 */
a:link {
  color: blue;
}
 
/* 已访问的链接 */
a:visited {
  color: purple;
}
 
/* 鼠标移到链接上 */
a:hover {
  color: red;
  text-decoration: underline;
}
 
/* 鼠标点击链接时 */
a:active {
  color: orange;
}

这个例子让链接根据不同状态显示不同颜色，用户能清楚地看到链接的状态变化。

表单输入框焦点样式

<input type="text" placeholder="请输入内容">
input:focus {
  border-color: #2563eb;
  outline: 2px solid #bfdbfe;
}

当用户点击输入框时，边框会变成蓝色，并显示蓝色的外轮廓，提示用户当前正在操作这个输入框。

列表第一项特殊样式

<ul>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ul>
li:first-child {
  font-weight: bold;
  color: #2563eb;
}

这条规则会让列表的第一项显示为粗体蓝色，和其他项区分开。

复选框选中样式

<label>
  <input type="checkbox">
  我同意服务条款
</label>
input[type="checkbox"]:checked + label {
  color: #10b981;
  font-weight: 500;
}

当用户勾选复选框时，旁边的文字会变成绿色并加粗。

特点

  • 伪类用冒号 : 开头
  • 伪类可以根据元素状态或元素位置选中元素
  • 伪类不会改变 HTML 结构，只是选中特定状态的元素
  • 伪类可以和其他选择器组合使用，例如 a.button:hover
  • 不同类型的伪类可以同时使用，例如 input:focus:valid
  • 伪类不需要 JavaScript 就能实现动态效果
  • 伪类对用户体验和可访问性很重要

注意事项

  • 链接伪类的顺序很重要，通常按 :link → :visited → :hover → :active 的顺序书写
  • :hover 在触摸屏设备上可能不生效，不要让功能完全依赖 :hover
  • :focus 样式不要完全移除，否则键盘用户无法判断当前焦点位置
  • :visited 出于隐私保护，只能设置少数几个样式属性
  • 某些伪类可能有浏览器兼容性问题，使用前最好查看兼容性表格
  • 伪类和伪元素不是同一个概念，伪元素使用双冒号 ::

理解

可以把伪类理解为元素的”状态选择器”。

它让 CSS 能够识别元素当前处于什么状态（鼠标移上去了？被点击了？获得焦点了？），或者元素在文档中处于什么位置（是第一个？是最后一个？是第三个？）。

然后根据这些状态或位置，给元素应用不同的样式。

这样做的好处是不需要写 JavaScript，就能让页面根据用户的操作或者元素的位置实时变化样式，提升用户体验。

伪类的核心价值是用纯 CSS 实现动态效果和状态反馈，让网页不只是静态的内容展示，而是能够对用户的操作做出响应。

引出

理解了伪类的概念之后，可以继续学习：

也可以学习伪元素的用法，了解 ::before 和 ::after 如何在元素前后插入内容。

关系图谱

反向链接