在 li 或除 a、input、button 等之外的其他元素上使用 :focus 伪类答案

【问题标题】：using :focus pseudo class on li or other element else than a,input,button, etc在 li 或除 a、input、button 等之外的其他元素上使用 :focus 伪类
【发布时间】：2012-01-26 17:50:04
【问题描述】：

是否可以选择一个有焦点的元素，如 a:focus 或 input:focus，但在另一个元素上，如 div、li、span 或其他？

如果不可能，如何用标签代替？我正在尝试修改 li 元素在聚焦时的高度，尝试使用 a，但高度不会改变。

请求的信息：

“你能不能解释一下你是如何把注意力放在李身上的？”

通过 css 选择器li:focus。见https://jsfiddle.net/s4nji/Rjqy5/。

【问题讨论】：

你能不能解释一下你是如何把注意力放在李身上的？
我是这样做的，jsfiddle.net/s4nji/Rjqy5
我看不到您的LI 的关注点在哪里？您所提供的只是一组LI 元素和一个可以集中注意力的链接。以及重点元素的 CSS 设置。这就是为什么我问你，你是如何关注LI 元素的？我想唯一的方法是在你的LI 中放置一个锚标签以使其具有焦点...当然不是直接LI...

标签： css css-selectors pseudo-class

【解决方案1】：

这很简单：只需将tabindex 属性添加到通常不会获得焦点的元素。

【讨论】：

我在他的 JSFiddle 上试了一下，因为我想到了它可以使它聚焦...似乎没有用...
tabindex="0" 表示该元素在顺序键盘导航中应该是可聚焦的，但其顺序由文档的源顺序定义 - moz tabindex docs

【解决方案2】：

您不能集中列表项。甚至不使用脚本。我试过做$("li:first").focus()，但它什么也没做。 CSS 没有像被聚焦一样被设置。这仅仅意味着您要么无法关注列表项，要么:focus 伪类不适用于列表项。

将锚点放在列表项中

<ul>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
    ...
</ul>

这看起来会聚焦您的列表项，但实际上会聚焦锚标签。

【讨论】：

我正在尝试通过聚焦（点击）li 元素来修改高度。我试过了，但高度不会改变。
我已经在插入我的 li 标签内的每个锚点上放置了一个 tabindex。但仍然不能对他们调用 :focus css 规则......有人让它工作了吗？
@s4nji 高度不会改变？在它作为内联块。
@Alex 关注li:focus 或li a:focus？以后当然应该工作。
问题是你在#95 中的选择器。将其更改为 nav.menu-custom-wiki > ul > li > a:focus + div 并开始在主菜单项单击时显示子菜单（聚焦它们）。