如何为普通元素添加聚焦效果，实现CSS Grid布局行选中持久背景色

你当前使用的:active伪类仅在鼠标按下的触发阶段生效，鼠标松开后状态就会消失，无法满足持久选中的需求，可通过以下两种方案实现：

方案1：纯CSS实现（无JS依赖，适合单选场景） #

通过给行元素添加可聚焦属性，配合:focus伪类实现持久选中效果：

1. 给所有行元素的HTML标签添加tabindex="0"属性，让普通div元素支持聚焦能力
2. 调整CSS样式如下：

&-row {
  /* 移除默认聚焦外边框，避免样式干扰 */
  outline: none;
}
&-row:focus {
  background-color: red;
}

该方案的优势是不需要引入JS，缺点是点击页面其他区域时，行元素失去焦点就会丢失选中状态。

方案2：JS配合自定义CSS类实现（灵活可控，推荐生产环境使用） #

该方案支持单选、多选等多种需求，选中状态不会因为点击页面其他区域消失：

1. 先定义选中状态的专用样式类：

&-row.active {
  background-color: red;
}

2. 给行元素绑定点击事件，切换选中类：

const gridRows = document.querySelectorAll('.xxx-row');
gridRows.forEach(row => {
  row.addEventListener('click', function() {
    // 单选逻辑：点击新行时清空其他行的选中状态
    gridRows.forEach(r => r.classList.remove('active'));
    this.classList.add('active');

    // 多选逻辑：注释上面两行，改用下面的切换逻辑即可
    // this.classList.toggle('active');
  })
})

内容的提问来源于stack exchange，提问作者CodePro