如何使用 CSS 伪类让 Span 按钮在点击后高亮选中？

使用 CSS 伪类，让 Span 按钮点击后高亮选中

如何让点击的 Span 按钮具有选中的高亮状态？对于这个问题，我们可以借助 CSS 伪类来实现。

CSS 伪类

CSS 伪类允许我们针对元素的特定状态设置样式，例如：

• :hover：鼠标悬停在元素上时触发
• :active：鼠标按下元素时触发，鼠标抬起时失效
• :focus：元素获得焦点时触发，失去焦点时失效

让 Span 按钮高亮

要让 Span 按钮点击后高亮，可以使用以下代码：

p > span {
  background-color: white;
  color: black;
}

p > span:hover {
  background-color: lightgray;
  cursor: pointer;
}

p > span:active {
  background-color: gray;
}

p > span:focus {
  background-color: lightgray;
  outline: none;
}

使用 tabindex 属性

由于 p 和 span 元素默认不具备聚焦功能，我们需要添加 tabindex 属性使其具备聚焦功能。

<p>
  <span tabindex="1">按钮 1</span>
  <span tabindex="2">按钮 2</span>
</p>

通过这种方法，我们可以让 Span 按钮在点击、悬停或聚焦时具有不同的高亮状态。