在网页设计中，让用户清晰地了解当前操作状态是提升用户体验的关键环节。借助 CSS 伪类来实现 Span 按钮点击后高亮选中的效果，能有效地增强页面交互性。

CSS 伪类为我们提供了一种在特定状态下对元素应用样式的简便方式。对于 Span 按钮，我们主要会用到 :active 和 :focus 这两个伪类。

我们要创建一个基本的 HTML 结构，包含一个 Span 元素作为按钮。例如：<span class="myButton">点击我</span>。

接下来，通过 CSS 样式为这个 Span 按钮添加初始样式。我们可以设置它的背景颜色、字体样式等，使其看起来像一个按钮。如：

.myButton {
    background-color: #ccc;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

当按钮被点击时，我们希望它呈现出高亮选中的状态。这时就可以使用 :active 伪类。:active 伪类会在元素被激活（如按下鼠标左键但未松开）时生效。我们为其添加如下样式：

.myButton:active {
    background-color: #007BFF;
    color: white;
}

这样，当用户点击 Span 按钮时，按钮的背景颜色会变为蓝色，文字颜色变为白色，从而实现了点击时的高亮效果。

:focus 伪类也很有用。:focus 伪类在元素获得焦点时生效，比如用户通过键盘的 Tab 键切换到该按钮时。为了让用户在使用键盘操作时也能明确知道当前选中的按钮，我们也可以为 :focus 伪类添加样式：

.myButton:focus {
    outline: none;
    box-shadow: 0 0 5px #007BFF;
}

这里取消了默认的焦点轮廓，并添加了一个蓝色的阴影，让按钮在获得焦点时也能有明显的视觉反馈。

通过巧妙运用 CSS 的 :active 和 :focus 伪类，我们能够轻松地为 Span 按钮实现点击后高亮选中的效果，为用户提供更加直观、友好的交互体验。无论是在小型项目还是大型应用中，这种方法都能为页面的交互性增色不少。