div 加伪类:focus

以前只知道input  可以加focus ，昨天项目中有需要在使用div 点击效果改变，不太想js，就尝试了 下div:focus

以下是个人总结的优缺点：

<style>

.testdiv{background-color:red}

</style>

<div class="testdiv" tabindex="0">123</div>

<div class="testdiv" tabindex="0">123</div>

<div class="testdiv" tabindex="0">123</div>

<div class="testdiv" tabindex="0">123</div>

<div class="testdiv" tabindex="0">123</div>

<div class="testdiv" tabindex="0">123</div>

效果点击div 当前div背景为红色

省略一部分js 代码

缺点：当键盘按下Tab 键 时也会触发div 背景 为红色 

个人理解：在网页不复杂情况下  可以使用div：focus 伪类，因为 在正常点击页面的时候不会可以去点击Tab键，如果觉得效果不好的话 就只能使用js 来写了！