CSS3 nav-index 属性

CSS3 nav-index 属性

简介

nav-index 属性用于设置一个元素在导航中的位置。它只能被用于可导航元素（如 a、button、input 等等）。

语法

nav-index: auto|

  • auto：浏览器将会为元素自动分配一个默认的导航序号。
  • ：一个正整数，定义元素在导航中的位置。

示例

HTML

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<h1 tabindex="0">This is the main heading</h1>

CSS

nav ul li:nth-child(1) a {
  nav-index: 1;
}

nav ul li:nth-child(2) a {
  nav-index: 2;
}

nav ul li:nth-child(3) a {
  nav-index: 3;
}

h1 {
  nav-index: 4;
}

注意事项

  1. nav-index 属性只能用于可导航元素。如果它被用于一个非导航元素上会被忽略。
  2. 必须将 tabindex 属性设置为 non-negative（非负的），否则 nav-index 属性将不起作用。
  3. 对于同一个导航栏，应该对每个元素都定义唯一的 nav-index 值。
CSS3 nav-down 属性 CSS3 nav-left 属性