CSS3 nav-down 属性
CSS3 nav-down 属性
CSS3 nav-down 属性定义了当用户通过 tab 键或 shift + tab 键导航时,从当前元素的下面的哪个元素开始导航。
语法
nav-down: auto|id|element|text|root|none;
值
- auto:默认值,表示元素下一个可访问元素(可以通过 tabindex 属性)将按照文档流中从上到下的顺序进行导航。
- id:指定一个元素的 ID 属性作为下一个可访问元素。如果指定的 ID 不存在或不可访问,则会导航到根元素(document.documentElement)。
- element:指定一个 CSS 选择器作为下一个可访问元素。如果指定的元素不存在或不可访问,则会导航到根元素(document.documentElement)。
- text:指定一个文本片段作为下一个可访问元素。如果没有找到匹配的文本,则会导航到 root。
- root:导航到根元素(document.documentElement)。
- none:禁用导航。
实例
下面是一个示例,演示了当用户通过 tab 或 shift + tab 键导航时,从当前元素的下面的哪个元素开始导航。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 nav-down 属性示例</title>
</head>
<body>
<h1>这是标题</h1>
<p>这是段落1</p>
<p>这是段落2</p>
<p>这是段落3</p>
<p>这是段落4</p>
<button>点击按钮</button>
<script>
document.querySelector("p:nth-of-type(2)").tabIndex = 0;
document.querySelector("button").tabIndex = -1;
</script>
<style>
p {
margin: 10px 0;
}
p:nth-of-type(2) {
background-color: yellow;
}
button {
margin-top: 20px;
}
button:hover {
background-color: blue;
color: white;
}
button:focus {
outline: none;
}
p:focus {
outline: 3px solid blue;
}
p:focus+h1 {
color: blue;
}
p:focus~button {
background-color: red;
color: white;
}
p:focus~p {
background-color: white;
}
p:focus~p:nth-of-type(2) {
background-color: yellow;
}
p:focus~p:nth-of-type(3) {
background-color: green;
}
p:focus~p:last-child {
background-color: pink;
}
p:focus~p:nth-child(3n+1) {
font-style: italic;
}
</style>
</body>
</html>
在这个示例中,
- 我们将第二个段落的
tabindex
属性设置为 0,以确保用户可以通过 tab 键等键盘导航到它。我们将按钮的tabindex
属性设置为 -1,因为它不想被当作下一个可以聚焦的元素。 - 当某个段落被聚焦时,它会应用特定的样式。比如,聚焦在第二个段落会将它的背景颜色设置为黄色。下一个元素(可以通过 tab 或 shift + tab 键导航)将根据
nav-down
属性指定的规则进行导航。 - 下一个元素的导航规则是通过设置
nav-down
属性完成的。默认情况下,下一个元素将是从上到下的下一个可聚焦元素,因为它的值为 “auto”,不需要额外的设置。用户可以通过按 tab 键轻松导航到下一个段落或按钮。 - 如果我们将
nav-down
属性设置为 “#header”,那么下一个可聚焦元素将是 ID 为 “header” 的元素。 - 如果我们将
nav-down
属性设置为 “.important”,那么下一个可聚焦元素将是类名为 “important” 的元素。 - 如果我们将
nav-down
属性设置为 “Click me”,那么下一个可聚焦元素将是包含文本 “Click me” 的元素。 - 如果我们将
nav-down
属性设置为 “root”,那么下一个可聚焦元素将是文档的根元素。 - 如果我们将
nav-down
属性设置为 “none”,那么在聚焦当前元素后,不能再通过键盘导航到下一个元素。
浏览器支持
CSS3 nav-down 属性在以下浏览器中受支持:
- Opera 6.0+
- Internet Explorer 8.0+
- Mozilla Firefox 1.0+
- Google Chrome 1.0+
- Safari 3.1+
总结
CSS3 nav-down 属性是一项非常有用的技术,可以帮助开发人员控制 keyboard navigability(键盘导航能力)和 focus order(焦点顺序)。近年来,随着对可访问性的重视,CSS3 nav-down 属性的重要性也越来越突出。在开发时,我们应该充分利用这项技术,以提高页面的可访问性和用户体验。