技术文摘
CSS伪类选择器实现span标签点击后高亮选中效果的方法
2025-01-09 17:37:07 小编
在网页设计中，为了提升用户体验，常常需要实现一些交互效果。其中，让 span 标签在点击后呈现高亮选中效果是一个常见需求，而 CSS 伪类选择器则是实现这一效果的有力工具。
CSS 伪类选择器是用于向某些选择器添加特殊效果的。要实现 span 标签点击后高亮选中效果，我们主要会用到 :active 和 :focus 伪类选择器。
创建一个简单的 HTML 结构，包含几个 span 标签。例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>span 点击高亮</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<span class="highlight">选项 1</span>
<span class="highlight">选项 2</span>
<span class="highlight">选项 3</span>
</body>
</html>
接着，在 CSS 文件（styles.css）中进行样式设置。使用 :active 伪类选择器，它会在元素被激活（比如鼠标按下未松开）时起作用。
.highlight:active {
background-color: yellow;
color: red;
}
这样，当用户点击 span 标签时，它会立即呈现出黄色背景和红色文字的高亮效果。不过，当鼠标松开后，效果就会消失。如果希望在点击后一直保持高亮状态，就需要借助 JavaScript 来实现类的添加与移除。但如果仅从 CSS 角度出发，还可以利用 :focus 伪类选择器。
:focus 伪类选择器用于选取获得焦点的元素。当 span 标签获得焦点时，也能应用相应样式。为了让 span 标签可以获得焦点，需要给它添加 tabindex 属性，例如：
<span class="highlight" tabindex="0">选项 1</span>
然后在 CSS 中设置 :focus 样式：
.highlight:focus {
background-color: lightblue;
color: darkblue;
}
此时，当用户点击 span 标签或者通过键盘 Tab 键切换到该标签时，它就会呈现出浅蓝色背景和深蓝色文字的选中效果。
通过 CSS 伪类选择器，我们可以轻松实现 span 标签点击后的高亮选中效果，为网页增添交互性和视觉吸引力，提升用户在浏览页面时的操作体验。无论是简单的展示性页面还是复杂的应用程序界面，这一技巧都能发挥重要作用。