CSS div获取聚焦 问题

Question

1. 需求是 有多个div，通过点击div 使得被点击的div样式发生改变

相关代码如下
html

<div class="div1" tabindex="1"> div1</div>
<div class="div2" tabindex="2">div2</div>

css

 .div1:focus,
  .div2:focus {
    background-color: red
  }

问题： 虽然初步实现了点击div样式改变，但是遇到一个问题，点击这两个div之外的地方，div的焦点会失去，样式也会还原， 怎么才能做到像单选框一样，做到多选一，点击这两个div之外的地方，div1 和div2 中保留focus。

Answer 1

有些定义你理解错了
1: focus 就是聚焦的意思, 你点击了别的地方当然要失焦
2: 你描述的情况你是想要一个选中状态, 因该是点击事件为div增加新的class才对

Answer 2

纯css我感觉没办法，上js可以，失焦的时候判断下是否点击了另一个，没有的话 就强行获取焦点(问题是 获取焦点 其他别的事情都不能干，比如在input里面输入内容)

Answer 3

纯css可以考虑配合radio来实现，radio:checked ~ div这种