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 属性的重要性也越来越突出。在开发时，我们应该充分利用这项技术，以提高页面的可访问性和用户体验。

CSS3 icon 属性 CSS3 nav-index 属性