CSS伪类选择器有哪些？如何实现悬停效果？

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《CSS伪类选择器有哪些？悬停效果怎么实现？》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

实现悬停效果的核心是使用:hover伪类，它属于CSS伪类选择器的一种，用于在用户将鼠标指针悬停在元素上时应用特定样式。1. 伪类选择器基于元素的状态或位置添加样式，如:hover表示悬停状态，:focus表示获得焦点时的状态；2. 伪元素则创建虚拟元素，如::before和::after可在内容前后插入样式化内容；3. 常见的伪类包括:link、:visited、:active、:focus、:nth-child(n)、:not(selector)、:checked等，分别用于链接状态、激活状态、聚焦状态、子元素选择、否定选择及表单选中状态；4. 除了悬停，伪类还能实现表单验证反馈（如:valid、:invalid）、URL片段控制（如:target）、键盘焦点管理（如:focus-visible）以及元素状态判断（如:empty、:enabled、:disabled），从而增强页面交互性和动态表现力。

CSS的伪类选择器，简单来说，就是给HTML元素在特定状态下，或者在文档树中的特定位置时，赋予额外样式的能力。它们并不是凭空出现的，而是基于元素本身的一些内在属性或用户交互行为。而要实现悬停效果，我们最常用也最直接的工具就是:hover这个伪类。

解决方案

要实现一个元素的悬停效果，核心在于使用:hover伪类。当用户鼠标指针移动到被选中的元素上时，:hover规则中定义的样式就会生效。

比如，我们有一个普通的按钮：

<button class="my-button">点击我</button>

要让它在鼠标悬停时改变背景颜色，可以这样写CSS：

.my-button {
    background-color: #007bff; /* 默认背景色 */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    /* 增加一个过渡效果，让变化更平滑 */
    transition: background-color 0.3s ease;
}

.my-button:hover {
    background-color: #0056b3; /* 悬停时的背景色 */
    /* 也可以改变其他属性，比如字体颜色、阴影等 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

这里我个人会习惯性地加上transition属性，因为没有它，颜色变化会显得很突兀，就像是突然“跳”了一下。有了过渡，整个用户体验就顺滑多了，这也是我做前端时特别注重的小细节。

伪类和伪元素的区别是什么？

说实话，这真的是一个新手老手都会偶尔混淆的问题，甚至有时候我写代码快了也会下意识地把双冒号写成单冒号。但从概念上讲，它们俩是完全不同的东西。

伪类（Pseudo-classes）描述的是元素的特殊状态。记住“状态”这个词是关键。比如，一个链接是“被访问过的”还是“未被访问过的”？一个输入框是“聚焦的”还是“禁用的”？一个按钮是“被鼠标悬停的”？这些都是元素在特定时刻或特定条件下的状态。它们不会在DOM树中创建新的元素，只是给现有元素添加了额外的样式规则。例如：:hover, :focus, :active, :first-child, :nth-child(), :checked等等。

而伪元素（Pseudo-elements）则是在DOM树中创建了一些“虚拟的”元素，这些元素本身并不存在于你的HTML标记里，但你可以像操作真实元素一样去给它们添加样式。最常见的莫过于::before和::after，它们会在目标元素的内容之前或之后插入一个行内级别的虚拟盒子，你可以在里面放文本、图片或者其他任何CSS能生成的图形。还有像::first-line（选择元素的第一行文本）和::first-letter（选择元素的第一个字母）也是伪元素。

从语法上，W3C推荐伪类使用一个冒号（:），伪元素使用两个冒号（::）。虽然大多数现代浏览器为了兼容性，对于伪元素也支持单冒号写法（例如::before写成:before也能跑），但为了清晰和符合规范，我个人还是建议严格区分，用双冒号给伪元素，单冒号给伪类。这样代码可读性会好很多，也显得专业。

常见的CSS伪类选择器有哪些，它们分别有什么用？

CSS伪类选择器种类非常多，它们极大地增强了我们对页面元素进行精细控制的能力。除了前面提到的:hover，还有很多我在日常开发中经常使用的：

• :link 和 :visited: 这两个是针对超链接的。:link用于选择尚未被访问过的链接，而:visited则选择已经被用户访问过的链接。它们在导航栏或文章内链的样式设计中非常有用，能给用户提供直观的访问历史反馈。

  a:link { color: blue; }
  a:visited { color: purple; }

• :active: 当用户“激活”一个元素时（比如点击鼠标按钮但尚未释放，或者在触摸屏上长按），:active伪类就会生效。它通常与:hover一起使用，为按钮或链接提供一个完整的交互反馈链。

  button:active {
      transform: translateY(1px); /* 点击时稍微下移 */
      box-shadow: none;
  }

• :focus: 当一个元素获得焦点时（比如用户点击了一个输入框，或者通过Tab键切换到某个可聚焦元素），:focus伪类就会生效。这对于表单元素和可访问性非常重要，能清晰地指示用户当前正在操作哪个元素。

  input:focus {
      border-color: #007bff;
      outline: none; /* 移除默认的蓝色轮廓，然后自己定义样式 */
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }

• :nth-child(n) 和 :nth-of-type(n): 这两个伪类用来根据元素在其父元素中的位置来选择元素。:nth-child(n)选择的是父元素的第n个子元素，无论其类型；而:nth-of-type(n)则选择的是父元素中特定类型的第n个子元素。它们在列表、表格的斑马线效果（隔行变色）或者特定位置的元素样式调整上非常实用。

  /* 给列表奇数行添加背景色 */
  li:nth-child(odd) {
      background-color: #f0f0f0;
  }
  /* 给父元素下的第二个p标签添加样式 */
  div p:nth-of-type(2) {
      font-weight: bold;
  }

• :not(selector): 这是一个否定伪类，它选择不符合括号内选择器的元素。比如，你想选择所有div，除了那些带有hidden类的div。

  div:not(.hidden) {
      display: block;
  }

• :checked: 专门用于单选框（radio）和复选框（checkbox）。当这些表单元素被选中时，:checked伪类生效。这在自定义表单控件样式时特别有用，可以避免浏览器默认样式带来的限制。

  input[type="checkbox"]:checked + label {
      color: #007bff;
      font-weight: bold;
  }

这些只是冰山一角，但它们涵盖了日常开发中大部分需要根据元素状态或位置来调整样式的情况。

除了悬停，伪类还能实现哪些交互或样式效果？

除了鼠标悬停，伪类在实现各种交互和样式效果方面简直是多面手。它们能够让我们的页面在没有JavaScript的辅助下，也能展现出相当丰富的动态感和响应性。

一个我经常用到的场景是表单验证反馈。CSS3引入了一些新的伪类，比如:valid和:invalid，它们可以根据输入框的内容是否符合其type或pattern属性定义的规则来自动应用样式。当用户输入的数据不合法时，我们可以用:invalid来给输入框加上红色的边框或者提示图标，提供即时反馈。相反，如果输入合法，:valid则可以显示绿色。这极大地提升了用户体验，减少了用户提交表单后的等待时间。

input:invalid {
    border-color: red;
    box-shadow: 0 0 0 0.2rem rgba(255, 0, 0, 0.25);
}
input:valid {
    border-color: green;
    box-shadow: 0 0 0 0.2rem rgba(0, 255, 0, 0.25);
}

另一个很棒的应用是基于URL片段的样式控制。:target伪类可以用来选择当前URL片段（即URL中#后面的部分）所指向的元素。这在实现简单的手风琴（accordion）效果、页面内导航的高亮显示，或者弹出框（modal）的显示与隐藏时非常有用。你只需要在链接中设置href="#element-id"，当这个链接被点击时，对应的id元素就会被:target选中，然后你可以给它应用特定的样式，比如display: block;来显示隐藏的内容。

<a href="#section-about">关于我们</a>
<div id="section-about" style="display: none;">
    <!-- 内容 -->
</div>

#section-about:target {
    display: block !important; /* 显示目标内容 */
}

还有，像:focus-visible这个伪类，它解决了:focus的一个小痛点：不是所有元素获得焦点时都需要显示轮廓。:focus-visible只在用户通过键盘操作（如Tab键）使元素获得焦点时才显示焦点轮廓，而通过鼠标点击时则不显示。这在保持可访问性的同时，又避免了鼠标点击时出现不必要的轮廓，让界面看起来更整洁。

:empty伪类则可以用来选择没有任何子元素（包括文本节点）的元素，这在处理一些动态生成内容或者确保某些空容器不占用空间时很有用。:enabled和:disabled则专门用于表单元素，根据其可用状态来调整样式。

总的来说，伪类不仅仅是给元素一个简单的状态切换，它们是CSS强大表现力的一部分，允许我们基于用户行为、元素结构甚至数据状态来动态地调整页面样式，从而构建出更具响应性和交互性的用户界面。有时候，我会觉得它们就像是CSS自带的“微型逻辑”，虽然简单，但却能解决很多实际问题。

本篇关于《CSS伪类选择器有哪些？如何实现悬停效果？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！