CodePen

bookmark_border 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

将元素插入到标签页顺序中

使用 tabindex="0" 将元素插入自然标签页顺序中。例如：

<div tabindex="0">Focus me with the TAB key</div>

如需将焦点移至某个元素，请按 Tab 键或调用该元素的 focus() 方法。

从标签页顺序中移除元素

使用 tabindex="-1" 移除元素。例如：

<button tabindex="-1">Can't reach me with the TAB key!</button>

这会将元素从自然标签页顺序中移除，但您仍然可以通过调用其 focus() 方法来将焦点移至该元素。

请注意，对元素应用 tabindex="-1" 不会影响其子元素；如果它们自然而然地或因 tabindex 值而位于标签页顺序中，则会保持在标签页顺序中。如需从标签页顺序中移除某个元素及其所有子元素，不妨考虑使用 WICG 的 inert polyfill。该 polyfill 会模拟建议的 inert 属性的行为，以防止辅助技术选择或读取元素。

开始行动吧！

.loader {
  animation: spin 0.75s infinite steps(var(--count));
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

请注意使用 steps(var(--count)) 来获得正确的效果 ✨