问题标签 [focus-within]

我正在尝试使用 CSS 的伪类创建一个 HTML 列表，其中嵌套ul元素仅在聚焦时显示。focus-within

这个想法是，仅使用键盘选项卡（暂时忽略鼠标交互）您应该能够沿着列表项从一个到下一个焦点，并且当您关注按钮元素时，它会显示下一级列表项。那部分工作正常。但是，当您离开按钮元素时，它应该保持下一个ul可见，因为焦点应该在嵌套的第一个a元素上ul，所以嵌套ul 应该被确定为集中在其中。

ol我有它，所以当我在s上设置背景颜色时，它可以作为演示。自然状态是白色背景，但“开放”状态由红色背景显示。这工作正常：

因此，当嵌套列表变为红色时，它们是可见的，否则它们是不可见的。

但是，当我用它替换背景颜色时display: block它display: none不起作用：

就好像在display: none焦点可以移动到嵌套链接之前状态开始了。任何人都可以确认我在这里吠叫一棵不可能的树，或者是否有办法让它工作？

编辑：要注意的另一件事是，如果您继续使用制表符，它会在第一级列表项中保持正确的位置，因此确实感觉焦点在嵌套列表的第一个锚元素上，但它只是没有'不承认嵌套ol在其中有一个焦点。

我正在尝试创建类似于带有父元素和子元素的仅 CSS 菜单，子元素在单击父元素时出现。它工作正常，除了一个我找不到答案的烦人的错误。子元素是可编辑/可聚焦的，当它被聚焦或处于编辑状态时，您碰巧更改了浏览器选项卡，也许是为了更改音乐，然后回到您正在处理的浏览器选项卡，子元素已经消失。如果我正在编辑子元素并且碰巧在我的电脑上导航到其他地方然后返回它，我希望子元素保持可见。

这是问题所在：focus-within 适用于标记示例中的所有子元素：

在此示例中，我使用 a.link2 和 a.link3 在它们处于焦点时打开菜单。我需要设置 a.link1 来关闭 div.parent 我已经做到了：

当我点击 a.link2 和 a.link3 时，它也会关闭侧边栏，我只想申请 a.link1 才能关闭侧边栏！

我如何设置 a.link1 以关闭侧边栏而不是（a.link2 和 a.link3 和 ....）只有 css，没有 JavaScript？有什么办法吗？

我想读出一个表的所有元素，但只有多个 -Tags 的一个值。我通过使用以下代码实现了这一点：

HTML 片段：

赛普拉斯代码：

但现在的问题是，表中只有一个（第一个）元素/行被读出。如何捕获表的所有行？我尝试使用 .each(elemt, index, content)，但它不能正常工作。

当单击它们下方的搜索栏时，我正在尝试显示搜索标签（文本输入字段上方的按钮）。我试图用 :hover :focus 和 :focus-within 解决这个问题，但它们似乎都不起作用。我究竟做错了什么？

这是代码：