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 标签点击后的高亮选中效果，为网页增添交互性和视觉吸引力，提升用户在浏览页面时的操作体验。无论是简单的展示性页面还是复杂的应用程序界面，这一技巧都能发挥重要作用。

TAGS: SPAN标签点击事件 CSS伪类选择器高亮选中效果

万千站长工具

技术文摘

CSS伪类选择器实现span标签点击后高亮选中效果的方法

欢迎使用万千站长工具！