为什么 `div:focus 没有`tabindex 不起作用

Question

div:focus 不起作用

div:focus {
    background-color:red;
}

<div>Will</div>
<div>You</div>
<div>Marry</div>
<div>Me</div>

但是I got a suggestion o solve this by using tabindex

div:focus {
    background-color:red;
}

<div tabindex="1">Will</div>
<div tabindex="1">You</div>
<div tabindex="1">Marry</div>
<div tabindex="1">Me</div>

但我不知道如果我添加了tabindex，为什么它会起作用？？为什么没有tabindex 就不能工作？我不要答案我只想知道原因？？

Answer 1

好吧，div 不是可聚焦元素，添加tabindex="-1" 将使 div 可聚焦，就这么简单。另外，使用tabindex="-1"，您甚至可以将不可选项卡元素设置为可选项卡，在包含不可选项卡元素的表单中使用时非常方便

Answer 2

我得到了我想要的，来自 @Turnip 评论

我的问题：

如果我添加了 tabindex，为什么它会起作用？为什么没有 tabindex 就不能工作？我不要答案我只想知道原因？？

答案：

tabindex 内容属性允许作者控制一个元素是否应该是可聚焦的，它是否应该可以使用顺序焦点导航来访问，以及为了顺序焦点导航的目的，元素的相对顺序是什么. “选项卡索引”这个名称来自于“选项卡”键在可聚焦元素中导航的常见用途。术语“tabbing”是指通过使用顺序焦点导航可以到达的可聚焦元素向前移动。

Referrence

Answer 3

正如他们在this docs:中所说的那样

提示：在接受键盘的元素上允许使用 :focus 选择器 事件或其他用户输入。

那么，一个 div 就不是一个 Focusable 对象。

请查看official mozzila docs 关于:focus

如果您想测试它是否真的有效，请使用输入（它确实是可聚焦的）。你会看到它的工作原理

input:focus {
    background-color:red;
}

<div>
<input type="text">
Will
</input>
</div>

<div>
<input type="text">
You
</input>
</div>

<div>
<input type="text">
Marry 
</input>
</div>

<div>
<input type="text">
Me 
</input>
</div>