：CSS中的焦点选择器

Question

JSFiddle（*:focus规则用于说明哪个元素被标记为具有焦点。）

我想知道为什么，当我点击一个菜单项时，它会获得焦点......但是点击一个菜单项并没有让它成为焦点。

CSS有什么问题让它以这种方式运行？

Answer 1

focus通常仅适用于可以接收键盘或其他输入的元素，因此启发式li不符合条件。 This question has more about it.

In the specs，CSS没有明确定义这些状态中可以包含哪些元素，因此很难为可以设置为focus的内容设置规则。< / p>

可能适用于您的目的是active，you can view here。

Answer 2

有一个小技巧 - 如果你想要一个默认没有焦点的项目，你应该通过设置它tabindex="N" - N是一个数字来表示它。就如此容易。如果您将tabindex添加到可点击的项目，他们将在您点击时获得焦点。如果标签可以标签，则必须能够获得焦点。如果您已加载tabindex，则将jQuery属性添加到菜单的所有节点非常简单：

$(function() { 
  $('#navbar *').attr('tabindex', '1');
});

结束了永恒的到来。你当然可以使用纯JavaScript来做到这一点。