CSS3 nav-index 属性

指定两个按钮的Tab键顺序：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    button {
      position: absolute;
    }

    button#b1 {
      top: 20%;
      left: 25%;
      nav-index: 1;
      nav-right: #b2;
      nav-left: #b4;
      nav-down: #b2;
      nav-up: #b4;
    }

    button#b2 {
      top: 40%;
      left: 50%;
      nav-index: 2;
      nav-right: #b3;
      nav-left: #b1;
      nav-down: #b3;
      nav-up: #b1;
    }

    button#b3 {
      top: 70%;
      left: 25%;
      nav-index: 3;
      nav-right: #b4;
      nav-left: #b2;
      nav-down: #b4;
      nav-up: #b2;
    }

    button#b4 {
      top: 40%;
      left: 0%;
      nav-index: 4;
      nav-right: #b1;
      nav-left: #b3;
      nav-down: #b1;
      nav-up: #b3;
    }
  </style>
</head>
<body>

  <button id="b1">按钮1</button>
  <button id="b2">按钮2</button>
  <button id="b3">按钮3</button>
  <button id="b4">按钮4</button>

  <p><b>注释：</b>目前只有 Opera 支持 nav-* 属性。当您使用方向键导航时，请同时按下 Shift 键。</p>

</body>
</html>

尝试一下 »

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
nav-index 不兼容 不兼容 不兼容 不兼容 Supported in Opera 11.5-12.
不兼容于更新版本的浏览器

属性定义及使用说明

nav-index属性指定了连续的导航元素的顺序（"Tab键顺序"）。

默认值： auto
继承： no
版本： CSS3
JavaScript 语法： object.style.navIndex=2

语法

nav-index: auto|number|inherit;

值 说明
auto 浏览器指派的元素的Tab键顺序
number 表示该元素的Tab键顺序。 1意味着首先
inherit 指定nav- index属性的值应该从父元素继承