为何div:focus无tabindex时不生效？添加后生效的原因

嘿，这个问题问到点子上了！我来给你把背后的逻辑讲明白：

• 默认情况下，普通div是不可聚焦的
  浏览器的焦点机制是专门为可交互元素设计的——比如<input>、<button>、<a>这些天生用来和用户互动的标签，默认就具备获得焦点的能力。而<div>这类普通块级元素，浏览器默认认为它只是用来展示内容的，不是交互目标，所以不会允许它获得焦点。这就导致你写的div:focus { background-color:red; }规则根本没机会触发，因为div从来不会进入聚焦状态。

• tabindex的作用就是让元素“可聚焦”
  当你给div加上tabindex="1"时，就相当于给浏览器发了一个明确的指令：「这个元素是可以被聚焦的，把它加入到Tab键导航的序列里」。这时候，div就获得了被聚焦的资格——无论是按Tab键切换焦点，还是用鼠标点击它，它都会进入聚焦状态，你的:focus样式自然就生效了。

  顺便提个实用小细节：tabindex的取值还有不同的作用：

  • tabindex="0"：元素会按照页面的自然顺序加入Tab导航，这也是最推荐的用法（除非你需要刻意调整焦点顺序）
  • tabindex="正数"：元素会优先被Tab键选中，数值越小优先级越高，但不建议随便用，容易破坏默认的页面导航逻辑
  • tabindex="-1"：元素可以通过JavaScript或者鼠标点击获得焦点，但不会被Tab键选中，适合一些需要临时聚焦的场景

回到你的代码：原来的四个<div>没有设置tabindex，所以完全无法被聚焦，样式也就没效果；加上tabindex后，它们变成了可聚焦元素，:focus规则终于能正常触发啦！

内容的提问来源于stack exchange，提问作者Ramesh Rajendran