Html 如何直接制表到子元素并忽略父元素

目前我有这样一个列表：

<div class="list">
  <div class="padding">
    <div class="clickable-item">item 1</div>
  </div>
  <div class="padding">
    <div class="clickable-item">item 2</div>
  </div>
</div>

我想用键盘一个接一个地点击可点击的项目

目前，它正在通过“padding”元素进行切换

是否有任何方法可以告诉浏览器忽略填充的父元素，并直接对子元素进行制表？

您可以在所需元素上设置tabindex属性。选项卡索引号确定元素的访问顺序

编辑：正如FullOnFlatWhite和Graham Ritchie提到的，通常最好使用零非正的选项卡索引，或者在div上使用role=按钮

<div class="list">
  <div class="padding">
    <div class="clickable-item" tabindex="0">item 1</div>
  </div>
  <div class="padding">
    <div class="clickable-item" tabindex="0">item 2</div>
  </div>
</div>

可以在所需元素上设置tabindex属性。选项卡索引号确定元素的访问顺序

编辑：正如FullOnFlatWhite和Graham Ritchie提到的，通常最好使用零非正的选项卡索引，或者在div上使用role=按钮

<div class="list">
  <div class="padding">
    <div class="clickable-item" tabindex="0">item 1</div>
  </div>
  <div class="padding">
    <div class="clickable-item" tabindex="0">item 2</div>
  </div>
</div>

---

这里有几件事需要考虑：

并不表示它是可单击的项目。请参阅：关于为什么使用div并不总是最好的解决方案，以及使用按钮或标记更便于访问。 与Anis R.所说的不同，如果您希望根据页面的顺序保持分页的逻辑流，那么您希望在元素上使用tabindex=0。 如果您必须使用div，请考虑在您的div上使用，以表明它确实是可单击的。

---

这里有几件事需要考虑：

并不表示它是可单击的项目。请参阅：关于为什么使用div并不总是最好的解决方案，以及使用按钮或标记更便于访问。 与Anis R.所说的不同，如果您希望根据页面的顺序保持分页的逻辑流，那么您希望在元素上使用tabindex=0。 如果您必须使用div，请考虑在您的div上使用，以表明它确实是可单击的。

---

你要创建的是什么，语义非常重要，所以这看起来应该是一个包含s。目前，它是如何完成任何事情的？默认情况下，示例中的任何内容都无法通过tab键访问，因此该示例中是否缺少一些JavaScript？您试图创建的是什么，语义非常重要，因此这看起来应该是一个包含s。目前，它是如何完成任何事情的？默认情况下，示例中的任何内容都无法通过tab键访问，因此此示例中是否缺少一些JavaScript？您永远不应该真正使用正tabindex，它会给逻辑选项卡顺序带来很多麻烦，因为tabindex>0的任何内容都将是文档选项卡顺序中的第一个，在DOM中显示在它前面的任何内容都应该是可聚焦的之前。您永远不应该真正使用正tabindex，它会给逻辑选项卡顺序带来很多麻烦，因为tabindex>0的任何内容都会在文档选项卡顺序中排在第一位，在DOM中显示在它前面的任何事件之前，都应该是可聚焦的。role=button向用户承诺将实现button元素具有的所有事件处理。role=button向用户承诺将实现button元素具有的所有事件处理。