css的元素:focus伪类不生效

问题
遇到一个需求，通过给div设置伪类:focus来被点击后变色的效果，但是当给div设置伪类:focus后发现并没有生效。

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

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

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

代码：

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


//样式

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