css element: focus pseudo-class does not take effect

Problem
I encountered a requirement to change the color after being clicked by setting the pseudo-class: focus to the div, but it did not take effect after setting the pseudo-class: focus to the div.

:focus : Add a special style to the element when the element gets the focus (if it is to set a color style for the element, it will change color after being clicked, and the color will not disappear after clicking)

The reason is
that Baidu found out that div does not support the :focus pseudo-class, because elements such as div cannot accept keyboard or other user events .

Solution The solution
is to add the tabIndex attribute to the div element so that it can support the :focus pseudo-class.
tabIndex attribute: Use the tab key to traverse the form elements and links on the page, determine the order according to the size of the tabindex, and also indicate whether its elements can be focused (focused).

code:

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


//样式

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