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“，您甚至可以将非可列表元素设置为tabbable，在包含不可列表元素的表单中使用时很方便

Answer 2

正如他们在this docs:

中所说的那样

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

然后，div不是Focusable对象。

Plz，查看关于:focus

的official mozzila docs

如果你想测试它确实有效，请使用输入（它确实是可聚焦的）。你会看到它正在运作

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>

Answer 3

我从 @Turnip 评论

获得了我想要的东西

我的问题：

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

答案：

tabindex内容属性允许作者控制元素是否应该是可聚焦的，是否应该使用顺序焦点导航可以到达，以及为了顺序焦点导航的目的，元素的相对顺序是什么。名称“tab index”来自“tab”键的常用用途，用于浏览可聚焦元素。术语“标签”指的是向前移动可通过顺序焦点导航到达的可聚焦元素。

Referrence

如果没有tabindex，为什么`div：focus does`不起作用

3 个答案:

我的问题：

答案：