轻松实现CSS标签点击高亮显示

提升用户体验，让标签拥有点击反馈，是很多开发者追求的目标。本文将详细介绍如何使用CSS实现标签的点击高亮效果。

标签本身不具备点击反馈机制，我们需要借助CSS伪类选择器来实现。主要用到 :hover、:active 和 :focus 三个伪类。

:hover 在鼠标悬停时触发样式变化，提供视觉提示；:active 在鼠标按下时触发，鼠标松开后失效，模拟按钮按下状态；:focus 在元素获得焦点时触发，通常用于键盘交互。

然而，标签等内联元素默认无法获得焦点，:focus 无法生效。为了让 :focus 生效，需添加 tabindex 属性（例如 tabindex="0"），赋予标签焦点能力，实现键盘交互下的高亮效果。

下面是结合这三个伪类的CSS代码示例：

span {
  cursor: pointer; /* 鼠标指针变为手形 */
  padding: 5px 10px; /* 添加内边距，方便点击 */
}

span:hover {
  background-color: #f0f0f0; /* 鼠标悬停时背景变浅灰 */
}

span:active {
  background-color: #ddd; /* 鼠标按下时背景颜色加深 */
}

span:focus {
  outline: none; /* 去除默认焦点轮廓 */
  box-shadow: 0 0 5px blue; /* 添加蓝色阴影效果 */
}

这段代码通过鼠标状态和焦点状态动态改变标签样式，实现点击高亮。 记住，tabindex 属性对于 :focus 的使用至关重要。