问题

遇到一个需求，在vue项目中根据a标签那样的链接跳转效果来实现组件的切换，于是乎打算通过给div设置伪类:focus来模仿a标签被点击后变色的效果，但是当给div设置伪类:focus后发现并没有生效。

:focus ：在元素获得焦点时向元素添加特殊的样式（如果是给元素设置颜色样式的话，被点击后变色，且颜色在点击后不消失）

原因

百度了一下才发现div是 不支持:focus伪类 的，因为 div等元素无法接受键盘或其他用户事件 。

解决方法

解决方法就是可以给div元素添加tabIndex属性，使其能够支持:focus伪类。
tabIndex属性：利用tab键遍历页面的表单元素和链接，按照tabindex的大小决定顺序，同时也有指示其元素是否可以聚焦（获得焦点）的作用。

代码：

<div tabindex="1"></div>

div:focus{
	color: rgb(85,26,139);
}

👇觉得有帮助的朋友可以支持下作者哦，您的鼓励是我创作的最大动力，如有开发问题可联系作者