reading-order

语法

/* <integer> values */
reading-order: 1;
reading-order: -1;

/* Global values */
reading-order: inherit;
reading-order: initial;
reading-order: revert;
reading-order: revert-layer;
reading-order: unset;

值

<integer>

表示元素所属的顺序组。

描述

当元素的块、flex 或 grid 父容器的 reading-flow 属性设置为 normal 以外的值时，可以使用 reading-order 属性来设置元素的阅读流位置，使其相对于其兄弟元素。

对于阅读和导航，块、flex 或 grid 容器内的元素按 reading-order 值升序排序。如果多个兄弟元素具有相同的 reading-order 值，则这些项根据容器的 reading-flow 进行排序。未明确指定 reading-order 值的兄弟元素被分配默认值 0，这使得阅读流容器的所有子元素默认处于同一顺序组。

兄弟元素按从最小编号的顺序组到最大编号的顺序组进行排序。因此，要使元素在其兄弟元素之后被读出，可以将其 reading-order 值设置为 1 或更大。要使元素在其兄弟元素之前被读出，可以将其 reading-order 值设置为 -1 或更小。

reading-order 定义了阅读和 Tab 键顺序，但对视觉顺序没有影响。

与 tabindex 的交互

如果一组通常不可聚焦的阅读流容器子元素通过 tabindex="0" 属性变得可聚焦，它们的阅读顺序将按 reading-flow 和 reading-order 属性的预期方式进行修改，就像 <a> 或 <button> 等交互元素一样。

但是，任何尝试使用正 tabindex 值修改阅读流容器内容的 Tab 键顺序的尝试都将被忽略——被 reading-flow 和 reading-order 的效果覆盖。无论如何，你通常不应该使用这些；请参阅不要使用大于 0 的 Tabindex。如果需要，reading-flow 和 reading-order 属性提供了更好的修改 Tab 键顺序的方法。

正式定义

示例

网格行顺序

此示例演示了如何使用 reading-order 来控制网格容器阅读顺序中单个网格项的位置。一个网格项的 reading-order 值低于默认的 0，因此将在其兄弟元素之前被读出。另一个网格项的 reading-order 值设置得更高，因此将在其他元素之后被读出，无论源顺序或显示顺序如何。

HTML

在我们的标记中，有六个包含在包装器 <div> 中的 <a> 元素。

<div class="wrapper">
  <a href="#">Item 1</a>
  <a class="bottom" href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a class="top" href="#">Item 4</a>
  <a href="#">Item 5</a>
  <a href="#">Item 6</a>
</div>

CSS

在 <div> 上，我们将 grid-auto-flow 属性设置为 dense，因此项目可能会以非源顺序显示。类为 top 的 <a> 元素的 reading-order 属性设置为 -1，因此“项目 4”将是阅读流中的第一个项目。类为 bottom 的 <a> 元素的 reading-order 属性设置为 21，因此“项目 4”将是阅读顺序中的最后一个项目。其余项目将在此之间以网格行顺序访问，因为 <div> 元素的 reading-flow 属性设置为 grid-rows。

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 150px);
  grid-auto-flow: dense;
  reading-flow: grid-rows;
}

.top {
  reading-order: -1;
}

.bottom {
  reading-order: 21;
}

结果

上面的演示渲染如下：

尝试使用 Tab 键浏览链接。请注意，“项目 4”是如何首先被 Tab 键访问，而“项目 2”是最后被 Tab 键访问的，这是因为它们的 reading-order 值被修改了。在这两者之间，项目按网格行顺序被 Tab 键访问。

源顺序覆盖

在此示例中，奇数项的 reading-order 值设置得较低，因此它们将在组中的其他项之前被读出，无论源顺序或显示顺序如何。

HTML

在我们的标记中，有五个包含在包装器 <div> 中的 <a> 元素。

<div class="wrapper">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  <a href="#">Item 4</a>
  <a href="#">Item 5</a>
</div>

CSS

<div> 元素的 reading-flow 属性设置为 source-order，这允许使用 reading-order 覆盖默认的源阅读顺序。奇数 <a> 元素的 reading-order 值为 -1，因此它们在偶数项之前被读出。

.wrapper {
  reading-flow: source-order;
}

.wrapper > a {
  display: block;
}

.wrapper a:nth-child(odd) {
  reading-order: -1;
}

结果

上面的演示渲染如下：

尝试使用 Tab 键浏览链接，并注意“项目 1”、“项目 3”和“项目 5”是如何首先被 Tab 键访问的，这是因为它们的 reading-order 被修改了。之后，项目按源顺序被 Tab 键访问。

规范

浏览器兼容性

另见

• reading-flow
• CSS reading-flow 示例（通过 chrome.dev）