javascript - 使用制表符遍历子项 (HTML)

Question

让我们来看一段这样的代码:

<article>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
</article>

我想重复这些 <p> -s 使用 tab键，并标记当前选中的 <p>使用 CSS(大纲或其他任何东西)。我尝试添加 tabindex到 <p> -s，但它似乎不起作用。

我的问题是:

• 是否有可能以这种方式迭代非输入/链接元素？
• 如果可能的话，捕获当前元素的伪类是什么？
• 奖励:是否可以将迭代保留在 <article> 中？ ？我希望迭代跳转到第一个 <p>在最后一个之后，反之亦然。

纯 HTML/CSS 解决方案会更好，但我也可以使用 JS。

Answer 1

使用 tabindex="0" 到 p 并在 css :focus 中使用 background:red; 和width:fit-content; 仅适合 background 到 text 内

也可以使用 onmousedown="return false;" 来防止鼠标点击focus

p:focus{
background:red;
width:fit-content;
}

<article>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
    <p onmousedown="return false;" tabindex="0">some text</p>
</article>