css中focus没有用

CSS中的:focus似乎是一个无用的属性。虽然它被广泛使用，但它实际上从未生效过。

input:focus {
  border: 2px solid blue;
} 

上面的代码看起来很简单，它应该在焦点落在input元素上时给它添加一个2像素的蓝色边框。然而，当你试着测试一下，你会发现它并没有生效。

这问题的原因在于，:focus只能作用于拥有焦点的元素，而大多数元素在默认情况下都没有焦点。因此，要想使用:focus，就需要在HTML文档中手动添加tabIndex属性，并设置值为“0”，这样元素才能成为可聚焦的。例如：

<div tabIndex="0">可聚焦元素</div> 

然而，这样做的结果是会使你的网站变得不可访问。因为很多用户使用键盘进行网页浏览，他们需要通过tab键来聚焦到页面的不同元素上。如果你强制用户在你的网站上使用:focus来实现页面交互，那么你就会剥夺了那些需要键盘访问的用户的权利。

另外，即使你为所有需要用到:focus的元素添加了tabIndex属性，这也会给代码添加更多的冗余，使得代码结构变得混乱，难以维护。因此，我们建议不要使用:focus这个属性，而是使用其他更加可靠和可访问的方式来增强网站的交互性。