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;
}
注意事项
- nav-index 属性只能用于可导航元素。如果它被用于一个非导航元素上会被忽略。
- 必须将 tabindex 属性设置为 non-negative(非负的),否则 nav-index 属性将不起作用。
- 对于同一个导航栏,应该对每个元素都定义唯一的 nav-index 值。