什么是选中
“选中”是元素的一种状态。在页面中，一个元素有很多种状态，比如正常态，选中态，禁用态，只读态……
如果一个元素可以被选中，则意味着用户可以通过点击该元素或按下 Tab 键，使元素从正常状态切换到选中状态，或者从选中状态切换回正常状态。
一个元素的选中状态流转过程如下图：
怎样使元素可以被选中
有一些元素自带可选中功能，默认可以被选中，比如 <button>。这类元素叫做可交互元素。
有一些元素则默认无法被选中，比如<div>。这类元素叫做不可交互元素。
想要改变不可交互的元素，使它可以被选中，可以在这个元素外层套一个 <button>，把 <button> 和这个元素当成一个整体（也就是组件）。这样这个组件就可以被选中了。
比如，现在有一个不可交互的元素，当前无法被选中
<div class="demo-element">可以被选中的元素</div>
在它外层套一个 <button> ，变成一个可以被选中的组件
<button id="btn" class="focus-wrapper demo-component" id="btn">
<div class="demo-element">可以被选中的元素</div>
</button>
为这个组件添加样式
/* 去掉 button 默认样式 */
button.focus-wrapper {
font-size: 100%; /* 去掉默认字号 */
font-family: inherit; /* 去掉默认字体 */
border: 0; /* 去掉默认边框 */
padding: 0; /* 去掉默认内边距 */
outline: none; /* 去掉选中时浏览器默认的边框样式 */
}
/* 设置自定义样式 */
button.demo-component {
cursor: pointer; /* 添加鼠标 hover 样式 */
border: 1px solid #aaa; /* 添加边框 */
}
/* 设置自定义样式（选中状态下） */
button.demo-component:focus {
background: #eee; /* 添加背景色 */
}
监听组件的键盘事件（键盘事件在组件被选中时可以被触发）
let btn = document.querySelector('#btn')
btn.addEventListener('keyup', event => {
const keyName = event.key;
if (keyName !== 'Tab') alert(`按下了 ${keyName} 键`);
});
现在，一开始不可选中的元素就可以选中了：）
还有另外一个方法，就是给元素增加 tabindex 属性。不过给不可交互的元素增加 tabindex 属性，会影响无障碍访问的实现（使各种群体都可以访问，比如视听障碍人群、移动设备，遥控器、弱网环境等），所以不推荐使用，了解一下就行了。
