CSS3 nav-index 属性

nav-index 是一个 CSS 属性，用于指定元素在导航顺序中的索引值。导航顺序是指通过键盘导航网页时，元素被聚焦的顺序。通常情况下，浏览器会按照文档流中元素的顺序确定导航顺序，但通过设置 nav-index 属性，我们可以改变元素的默认导航顺序。

语法

element {
  nav-index: auto | number;
}

• auto：元素的导航顺序由浏览器默认确定。
• number：指定元素在导航顺序中的索引值，数字越小，优先级越高。

示例

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>nav-index Example</title>
<style>
  button {
    nav-index: 2;
  }
  input {
    nav-index: 1;
  }
</style>
</head>
<body>
  <input type="text" placeholder="Enter your name...">
  <button>Submit</button>
</body>
</html>

在上面的示例中，我们设置了一个文本输入框和一个按钮，通过设置它们的 nav-index 属性，我们指定了它们在导航顺序中的优先级。当用户通过键盘导航时，首先聚焦文本输入框，然后才是按钮。

nav-index 属性在一些特定的交互场景中非常有用，例如表单中的输入元素和按钮的顺序，可以通过设置 nav-index 属性来优化用户的键盘操作体验。