CSS 溢出模块第 5 级

1. 引言

本规范扩展了 [CSS-OVERFLOW-4]。它目前是一个差异规范，仅定义了少量新特性；有关溢出的其余特性，请参阅 [CSS-OVERFLOW-4]。

本节定义了将滚动标记与滚动容器中的元素关联的能力（或作为 ::scroll-marker 伪元素自动生成它们，具有自动用户行为和可访问标签），这些标记可以被激活以滚动到关联的元素，并通过 :target-current 伪类反映滚动容器的相对滚动进度。

它还定义了 ::scroll-button() 伪元素，激活这些伪元素可以使其关联的滚动容器向给定方向滚动一个“页面”。

溢出重定向

本节定义了一个高度实验性、探索性的新模型，用于通过将溢出重定向到新生成的分片容器来处理溢出。

2. 溢出概念与术语

最终确定后复制第 3 级内容。

2.1. 滚动溢出

以下内容添加到滚动溢出的概念中：

每个滚动容器都维护一个当前滚动目标。它最初为 null，并且在该滚动容器中由用户发起的任何滚动操作之后，或任何没有目标的脚本发起的操作之后，或者当目标从文档中移除时，都会重置为 null。在滚动容器中具有目标元素或伪元素的滚动操作，会将当前滚动目标设置为该目标元素或伪元素。

设置当前滚动目标应在如何将目标滚动到视图中定义。

将当前滚动目标用作滚动锚定的锚点优先级候选者。

3.1. 滚动标记

滚动标记是任何具有滚动目标的元素或伪元素。元素或伪元素的滚动目标是由滚动标记指示的元素。哪些元素是滚动标记，以及它们的滚动目标是什么，由宿主语言定义。 HTML <a> 元素和 SVG <a> 元素是滚动标记，其滚动目标是指示的部分。虽然这些导航链接现在可以创建，但关于当前正在查看的内容，用户几乎得不到反馈，并且交互模型与许多现代可访问 UI 组件的期望不符。

本规范添加了一种机制，用于创建滚动标记组，以及用于自动创建 ::scroll-marker 伪元素。在每个组内，活动标记反映当前的滚动位置，并且可以设置样式以向用户指示他们所在的区域。

用例包括带有指向相关内容链接的目录、滚动轮播页面的标记，以及可滚动的选项卡面板。

添加表示这些示例的图片。

3.1.1. 滚动标记分组

具有 focusgroup 属性的元素定义了一个滚动标记组容器，它拥有一个滚动标记组，其中包含所有以此为最近祖先滚动标记组容器的滚动标记元素。

用于滚动进度跟踪的标记分组应与选择加入 focusgroup 焦点行为分开。

::scroll-marker-group 伪元素是其包含的 ::scroll-marker 伪元素的滚动标记组容器，这些伪元素共同形成一个滚动标记组。

3.1.2. scroll-marker-group 属性

名称：	scroll-marker-group
值：	none \| before \| after
初始值：	none
适用于：	滚动容器
继承：	否
百分比：	不适用
计算值：	指定值
规范顺序：	按语法
动画类型：	离散

scroll-marker-group 属性指定滚动容器是否应创建 '::scroll-marker-group' 伪元素，及其相对于滚动容器的位置。

none: 滚动容器不创建 '::scroll-marker-group' 伪元素。
before: 滚动容器生成一个 ::scroll-marker-group 伪元素，其框是其源元素的直接前兄弟元素。
after: 滚动容器生成一个 ::scroll-marker-group 伪元素，其框是其源元素的直接后兄弟元素。

3.1.3. ::scroll-marker-group 伪元素

::scroll-marker-group 完全可样式化伪元素由滚动容器元素生成，该元素的计算 scroll-marker-group 属性不为 none。

::scroll-marker-group 生成一个框作为其源元素的兄弟元素，或者紧接其前（如果 scroll-marker-group: before）或者紧接其后（如果 scroll-marker-group: after）。

建议对默认 UA 样式表进行以下补充，以确保滚动标记伪元素的生成不会使站点的布局失效：

/* ::scroll-marker 伪元素的生成不应
 * 使此伪元素外部的布局失效。 */
::scroll-marker-group { contain: size !important; }

scroll-marker-group 隐式地表现为一个单一的可聚焦组件，建立一个 focusgroup。

3.1.4. ::scroll-marker 伪元素

与 ::before 和 ::after 类似，所有元素都可以有一个 ::scroll-marker 伪元素，它被收集到最近的滚动容器祖先的 ::scroll-marker-group 中，并在激活时滚动到该元素。

当 ::scroll-marker 伪元素的计算 content 值不为 none 并且其最近的祖先滚动容器滚动容器的计算 scroll-marker-group 属性不为 none 时，该伪元素会生成一个框，作为其最近祖先滚动容器上 ::scroll-marker-group 伪元素生成框的子元素附加。这些框按照其源元素的树顺序添加。

这些伪元素具有其源元素的指示滚动目标。它们的行为类似于具有 tabindex 值为“-1”的元素，使其可以在其 '::scroll-marker-group' 内通过组内的箭头键导航获得焦点，或者在当前活动或没有其他 ::scroll-marker 活动且这是组中的第一个标记时通过 Tab 键获得焦点，确保该组具有保证的制表位。

3.1.5. 选择活动滚动标记：:target-current 伪类

在每个滚动标记组中，一次确定只有一个滚动标记处于活动状态。此类“活动”滚动标记匹配 :target-current 伪类。

以下代码段显示了如何高亮显示指向当前滚动部分的链接：

a:target-current {
    font-weight: bold;
}

滚动操作可能会向特定位置动画（例如，滚动条箭头点击、箭头键按下、“behavior: smooth”编程滚动），或者可能直接跟踪用户的输入（例如，触摸滚动、滚动条拖动）。在任何一种情况下，用户代理都会选择一个“最终滚动位置”，滚动条将到达该位置。这确保了相关标记立即被激活。

此“最终滚动位置”用于确定每个滚动标记组中的活动标记。由于标记本身可能仅表示内容的开始（例如，标题），因此我们将活动标记视为我们处于或超过其滚动位置的第一个标记。

每当参与一个或多个滚动标记组的滚动容器滚动时，或者布局更改最终滚动位置时，用户代理应根据目标滚动位置最可能感兴趣的内容部分，确定并更新每个滚动标记组的活动标记。

用于确定给定滚动标记组的活动标记的示例算法。

令 scroller 为组中所有滚动标记元素的最近公共祖先滚动容器。
令 active 为 scroller。
当 active 是一个包含由组定位的滚动目标元素的滚动容器时：
1. 令 scroller 为 active。
2. 令 targets 为其最近祖先滚动容器是 scroller 的滚动目标元素集合，以及包含由滚动标记组定位的滚动目标元素且其最近祖先滚动容器是 scroller 的滚动容器元素集合。
3. 如果 scroller 有一个非空的当前滚动目标
  
  令 active 为从当前滚动目标开始的反向树序遍历中遇到的targets中的第一个项目，或者如果在先前的遍历中未找到目标，则为targets中树序的第一个项目。
  
  否则，
  1. 令 primary 为主滚动轴，假定为容器书写模式的块方向。
  2. 令 secondary 为垂直于主滚动轴的滚动轴。
  3. 令 position 为考虑正在进行的滚动操作的“最终滚动位置”。
  4. 对于 primary 的每个轴，然后是secondary：
    
    令 scrollport size 为scroller在轴维度上的客户端大小。
    
    对于targets中的每个target，确定target在轴中的滚动到视图位置，并将其存储为target的关联target position。
    
    令 scroll size 为scroller在轴维度上的可滚动溢出区域的长度。
    
    令 scroll range 为 scroll size - scrollport size。
    
    如果 scroll range 大于 0，则重新分配不可达的目标位置：
    
    令 distribute range 为 min(1/8 * scrollport size, scroll range / 2)。
    
    令 before targets 为所有其关联target position小于 distribute range 的targets。
    
    令 minimum position 为before targets的最小target position。
    
    将before targets中每个目标的关联target position更新为 (target position - minimum position) / (distribute range - minimum position) * distribute range。
    
    令 after targets 为所有其关联target position大于 scroll range - distribute range 的targets。
    
    令 maximum position 为after targets的最大target position。
    
    将after targets中每个目标的关联target position更新为 (target position - (scroll range - distribute range)) / (maximum position - (scroll range - distribute range)) * distribute range + (scroll range - distribute range)。
    
    令 selected position 为target position等于或早于position（在轴中）的最大target position，或者其最近的较小target position < position - scrollport size / 2 且其 target position < position + scrollport size / 2。
    
    如果没有这样的位置，
    
    将selected position设置为第一个。
    
    令 active 为所有其关联target position为selected position的targets。
  5. 如果active有多个潜在目标，则令active为active中的第一个项目。
令 selected marker 为与active关联的滚动标记。如果多个滚动标记元素与active关联，则将selected marker设置为其中树序最早的标记。
返回 selected marker

每当 UA 确定一个新的标记是滚动标记组 group 的活动标记时，它必须运行以下步骤：

将活动标记的活动状态设置为 true。
如果活动标记是组的最后聚焦元素，

聚焦活动标记
将组的最后聚焦元素设置为活动标记。
将组中所有其他滚动标记元素的活动状态设置为 false。

3.1.6. 激活行为

当具有非空滚动目标的滚动标记通过显式调用或箭头键聚焦激活时：

令 element 为控件的滚动目标。
令 block 为 "start"。
令 inline 为 "start"。
将 element 滚动到视图中，使用 block 和 inline。
如果激活是由调用触发的
1. 跟随超链接更新 URL，但将焦点保留在标记元素上。
注意：如果用户通过 Tab 键移开焦点，焦点行为将确保他们 Tab 进入相关内容。

3.1.7. 焦点行为

当滚动标记被激活时，下一个按 Tab 键顺序的焦点导航将聚焦滚动目标（如果它是可聚焦的），否则，它将从滚动目标开始查找下一个可聚焦元素，就好像滚动目标已获得焦点一样。

3.2. 滚动按钮

::scroll-button( <scroll-button-direction> ) 伪元素在滚动容器的计算 content 值不为 none 时生成。它们生成的框如同其源元素紧邻的前兄弟元素，其内容由 content 指定。它们存在于其源元素的 ::scroll-marker-group 伪元素之后（当与 scroll-marker-group: before 一起使用时）。

一个滚动容器上可以存在四个不同的 ::scroll-button() 伪元素，每个都与一个基于其源元素的书写模式的流相对方向相关联：依次为 block-start、inline-start、block-end 和 inline-end。 ::scroll-button() 伪元素默认既可聚焦又可激活，其激活行为是将其源元素向其关联方向滚动一个“页面”，类似于按下 PgUp/PgDn 键。（通常，这将是滚动视口大小的约 85%。）与这些键类似，此滚动具有预期的方向和结束位置。

[CSSOM-VIEW-1] 将增加一个“按页面滚动”算法，届时可以引用该算法。参见问题 #10914 的决议。

这是按钮的最佳顺序吗？这确实符合 CSS 中逻辑方向的通常顺序，但是手动创建的类似按钮通常要么将垂直和水平方向分别组合在一起（即 block-start/block-end 然后是 inline-start/inline-end）要么将垂直方向“围绕”水平方向（即 block-start/inline-start/inline-end/block-end）。

四个 ::scroll-button() 伪元素通过选择器的参数单独选择。可能的 <scroll-button-direction> 值是：

up

down

left

right

选择与给定物理方向对应的 ::scroll-button()。

block-start

block-end

inline-start

inline-end

选择指定的 ::scroll-button() 伪元素。

prev

选择 block-start 或 inline-start ::scroll-button()，以源元素中其轴具有更多“可滚动页面”者为准：源元素的可滚动溢出高度除以其滚动视口高度，或者宽度也同样计算。

如果两个维度大小相同，则选择 block-start ::scroll-button()。

例如，假设源元素宽 800px，高 500px，而其可滚动溢出区域宽 1200px，高 1000px。因此，水平滚动表示 1.5 个“页面”(1200/800)，而垂直滚动表示 2 个“页面”(1000/500)，因此（假设元素为英文） ::scroll-button(prev) 选择器将选择 block-start 按钮。

next

与 prev 相同，只是它选择 block-end 或 inline-end ::scroll-button()。

我们是否要添加一些多按钮关键字，以便更容易地以相同方式设置多个按钮的样式？特别是，all 可能有用，但也可能需要 horizontal/vertical/block/inline。

::scroll-button() 是完全可样式化伪元素：对其应用的属性没有限制。

:disabled 伪类可以应用于 ::scroll-button()。当其源元素无法在其关联方向上滚动时，它匹配给定的按钮。

UA 样式表需要指定 ::scroll-button() 的样式与 button 元素相同，包括禁用样式。

::scroll-button() 是否应使用按钮的*完整* UA 样式，即 appearance:button？还是非原生渲染，即 appearance:none？如果是前者，我们显然需要定义与 appearance 的交互。

3.3. 焦点导航顺序

上述特性生成了几个可聚焦的伪元素。虽然这些伪元素在元素树中有定义的位置，但这对于这些控件的焦点导航（即“Tab 键顺序”）来说并不是最佳位置。

相反，滚动容器与本节中定义的各种伪元素之间的焦点导航按以下顺序进行：

如果滚动容器的 scroll-marker-group 设置为 before，则为其 ::scroll-marker-group 伪元素。

注意：由滚动容器的后代生成的各个 ::scroll-marker 伪元素会重新父化到此 ::scroll-marker-group 之下，并作为“焦点组”一起导航。
::scroll-button() 伪元素，按照它们定义的顺序存在。
滚动容器本身及其内容，按照它们正常的焦点顺序排列。
如果滚动容器的 scroll-marker-group 设置为 after，则为其 ::scroll-marker-group 伪元素。

附录 A：溢出重定向

本节内容高度实验性。它记录了当前扩展 continue 属性能力以解决其他用例的尝试。但是，目前尚未达成共识。在此提出是为了鼓励讨论，但不建议进行非实验性实现。

在 CSS Level 1 [CSS1] 中，将超出指定大小元素的内容放置通常是一个创作错误。这样做会导致内容扩展到元素边界之外，这可能会导致该内容与其他元素重叠。

CSS Level 2 [CSS2] 引入了 overflow 属性，它允许作者通过滚动来处理溢出，这意味着它不再是创作错误。它还允许作者指定通过剪切来处理溢出，这在作者的意图是不显示内容时是有意义的。这在 CSS Overflow Module Level 3 [CSS-OVERFLOW-3] 中得到了进一步完善。

然而，滚动并不是呈现大量内容的唯一方式，甚至可能不是最佳方式。毕竟，由于其优势，册子取代了卷轴成为大型书面作品的常见格式。

本规范引入了一种机制，供网页指定页面中的元素应通过分页而不是通过滚动来处理溢出。

本规范还从另一个方向扩展了溢出的概念。本规范允许作者指定多个片段，每个片段都有自己的尺寸和样式，而不是要求作者指定一个元素内容必须流入的单个区域，这样元素的内容就可以从一个片段流向下一个片段，并根据需要使用尽可能多的片段来放置内容而不会溢出。

在这两种情况下，实现都必须在块级排列方向上中断内容。实现必须按照 CSS Fragmentation Module [CSS-BREAK-3] 中的描述进行操作。

引导溢出：continue 属性

continue 属性使作者能够请求将不适合元素的内容进行分片（在 [CSS-BREAK-3] 的意义上），并为剩余内容应在何处继续提供替代方案。

值得注意的是，此属性解释了传统的分页，并对其进行了进一步扩展。

名称：	continue
新值：	overflow \| paginate \| fragments
初始值：	auto
适用于：	块容器 [CSS2]、弹性容器 [CSS3-FLEXBOX] 和网格容器 [CSS3-GRID-LAYOUT]
继承：	否
百分比：	不适用
计算值：	见下文
动画类型：	离散

此属性及其值的命名是初步的。最初在 https://lists.w3.org/Archives/Public/www-style/2015Jan/0357.html 中提议为 "fragmentation: auto | none | break | clone | page"，目前对于哪种命名更好尚未达成广泛共识。

此属性旨在概括和替换 region-fragment。一旦在本规范中足够稳定，region-fragment 应从区域规范中移除，以支持此属性。

注意： continue: fragments 替换了本规范早期版本中的 "overflow:fragments"，而 continue: paginate 替换了 "overflow: paged-x | paged-y | paged-x-controls | paged-y-controls"

auto

auto 仅在元素是CSS 区域（区域链中最后一个区域除外）时才可能作为计算值出现。不适合的内容将被推送到链中的下一个区域。

在所有其他情况下，auto 会计算为其他值之一。

这与 CSS Overflow 4 § 5.3 Fragmentation of Overflow: the continue property 中的定义不同，其中指定值即计算值。哪种模型更好？

overflow

不适合的内容根据 overflow 属性溢出

paginate

不适合的内容进行分页。这会在元素内部创建一个分页视图，类似于 'overflow: scroll' 创建可滚动视图的方式。

参见分页溢出

注意：打印实际上是在根元素上应用 "continue: paginate"。

fragments

不适合的内容会导致元素复制自身并继续布局。

参见分片溢出。

给定元素或伪元素的 continue 的计算值确定如下：

在具有布局约束（参见 [CSS-CONTAIN-1]）的元素或伪元素上，如果指定值为 auto 或 fragments，则计算值为 overflow。
否则，如果指定值为 auto
1. 在CSS 区域（区域链中最后一个区域除外）上，计算值为 auto
2. 在页面上，计算值为 paginate
3. 在分片框上，计算值为 fragments
4. 否则，计算值为 overflow
否则，如果指定值为 fragments
1. 在页面上，计算值为 paginate
2. 否则，计算值为指定值
在所有其他情况下，计算值为指定值

如果我们引入一个可以选择多列中列的伪元素，我们将需要指定 auto 在其上计算为 auto，或者引入一个新值并让 auto 计算为该值（但是该值在非列元素上会计算为什么？）。

注意：有关导致此属性的背景讨论，请参阅以下主题：关于 overflow、overflow-x、overflow-y 和 overflow-style 的讨论和关于分片属性的提案

分页溢出

本节介绍并定义了 continue 属性的 paginate 值的含义。

撰写本节

页面应该可以使用 @page 规则进行样式设置。这对于嵌套页面是如何工作的？

传统分页（例如打印时）是否应该通过 auto 计算值中的某些魔法来表达，或者通过在 UA 样式表中插入以下内容：

@media (overflow-block: paged), (overflow-block: optional-paged) {
    :root {
    continue: paginate;
    }
}

传统分页（例如打印时）假定 :root 包含在页面框中，而不是页面框是 :root 的伪元素子元素。我们是否可以使用类似于分片框的东西来解决这个问题？或者也许通过在 :root 内部的页面框内部设置一个分片框（复制 :root）？

当页面框是常规 css 框的子元素时，页面框模型是如何工作的？

是否能够一次显示 N 页，而不仅仅是一次显示一页？这可以是 "pagination-layout" 的一个值吗，例如： "pagination-layout: horizontal 2;"

Brad Kemper 提出了一个结合分页和分片溢出的模型，该模型也处理显示多个页面。https://lists.w3.org/Archives/Public/www-style/2015Mar/0241.html

当前分页溢出的实现使用 overflow/overflow-x/overflow-y 属性，而不是 [CSS3GCPM] 草案中提议的 overflow-style 属性（这也与 [CSS3-MARQUEE] 提案匹配），或此处描述的 continue 属性。

分片溢出

本节介绍并定义了continue 属性的 fragments 值的含义。

当元素的 continue 计算值为 fragments，并且实现在其他情况下会为该元素创建一个框时，那么实现必须为该元素创建一系列分片框。（对于具有 continue: fragments 的元素，可能只生成一个分片框。但是，如果元素的计算 continue 值不是 fragments，则其框不是分片框。）每个分片框都是一个分片容器，任何会导致该分片容器分片的溢出都会导致创建另一个分片框，作为前一个分片框的下一个兄弟节点。或者它就像是元素的下一个兄弟节点？需要弄清楚这究竟如何与其他框级修复相互作用。此外，如果分片框同时也是一个多列框（如 [css-multicol-1] 中所定义尽管它定义的是多列容器）任何会导致创建溢出列 [css-multicol-1] 的内容都将流入一个额外的分片框。然而，分片框本身可能会被破坏（由于它们外部的分片上下文中的分片，例如页面、列或其他分片框）；这种破坏会导致同一分片框的片段，而不是多个分片框。（这很重要，因为分片框可以通过其索引进行样式设置；这种破坏会导致具有单个索引的分片框的多个片段。这种设计选择是为了使跨页破坏分片框不会破坏索引与特定内容片段的关联。）强制中断到外部碎片化上下文的中断是应该导致单个碎片盒的新碎片还是新的碎片盒？我们是否应该在这里找到一个不同于分片框的术语，以使其不那么混乱？

如果我们希望能够对在另一种类型的分片上下文中拆分的元素片段进行样式设置，该怎么办？这些规则阻止了为此使用 ::nth-fragment()，尽管该名称似乎是此类功能最合乎逻辑的名称。

<!DOCTYPE HTML>
<title>将内容分解为等大小的卡片</title>
<style>
    .in-cards {
    continue: fragments;

    width: 13em;
    height: 8em;

    padding: 4px;
    border: medium solid blue;
    margin: 6px;

    font: medium/1.3 Times New
        Roman, Times, serif;
    }
</style>
<div class="in-cards">
    在此示例中，div 中的文本被分解为一系列卡片。
    这些卡片都具有相同的样式。
    当内容足以溢出一张卡片时，
    就会创建另一张卡片。第二张
    卡片的创建方式与第一张卡片的
    下一个兄弟节点完全相同。
</div>

在此示例中，div 中的文本
被分解为一系列
卡片。这些卡片都具有
相同的样式。当内容
足以溢出
一张卡片时，就会导致另一张

卡片被创建。第二张
卡片的创建方式与它是
第一张卡片的下一个兄弟节点完全相同。

作者可能希望通过将元素的开头几行放在单独的分片中来为它们设置不同的样式。但是，由于可能难以预测这些行所占的确切高度以将第一个分片限制在该高度，因此使用 max-lines 属性更为方便，该属性会强制分片在指定的行数后中断。只要这些行位于相同的块格式化上下文中，这就会在元素或其后代中包含的给定行数后强制中断。

<!DOCTYPE HTML>
<style>
    .article {
    continue: fragments;
    }
    .article::first-letter {
    font-size: 2em;
    line-height: 0.9;
    }
    .article::nth-fragment(1) {
    font-size: 1.5em;
    max-lines: 3;
    }
    .article::nth-fragment(2) {
    column-count: 2;
    }
</style>
<div class="article">
    ...
</div>

`max-lines` 属性允许
作者为文章的
前几行使用更大的字体。如果没有

`max-lines` 属性，作者
可能不得不改用
height 属性，但是
如果作者错误计算了
给定行数会占据
多少高度（这可能

特别困难，如果作者
不知道什么文本会
填充空间，确切地
使用什么字体，或者
确切地使用哪个平台的字体
渲染来
显示字体）。

我们应该指定 continue: fragments 不适用于至少某些表格部分，可能还有其他元素。我们需要确切地确定是哪些。

本规范需要说明创建了哪种类型的分片上下文，以便清楚 break-* 属性的哪些值会导致在此上下文中中断。我们可能希望 break-*: region 应用。

本规范需要一个处理模型，该模型将适用于包含分片的布局具有使用分片的固有大小来更改其可用空间量的特性（例如 [CSS3-GRID-LAYOUT]）的情况。在 [CSS-REGIONS-1] 中已经对此类处理模型进行了一些工作，在该模型上完成的工作以及该规范的编辑者应该为本规范中发生的情况提供信息。

片段样式

::nth-fragment() 伪元素

::nth-fragment() 伪元素是一个伪元素，它描述了由元素生成的某些片段框。伪元素的参数采用与 [SELECT] 中定义的 :nth-child() 伪类参数相同的语法，并且具有相同的含义，只是数字是相对于元素生成的片段框，而不是元素的兄弟元素。

注意：特意不提供允许通过从末尾而不是从开头计数来寻址片段的选择器。此类选择器会干扰片段数量的确定。

根据未来的讨论，此 ::nth-fragment(an+b) 语法可能会被新的 ::fragment:nth(an+b) 语法取代。

片段的样式

这应该仅适用于 continue:fragments，还是也适用于 continue:paginate？（如果适用，则 continue:paginate 需要更严格的属性限制。）

在没有带有 ::nth-fragment() 伪元素的规则的情况下，每个片段框的计算样式是为其创建片段框的元素的计算样式。但是，片段框的样式也受到其选择器的主题具有 ::nth-fragment() 伪元素的规则的影响，如果片段框的基于 1 的编号与该 ::nth-fragment() 伪元素匹配，并且选择器（不包括 ::nth-fragment() 伪元素）与生成片段的元素匹配。

在确定片段框的样式时，这些匹配片段伪元素的规则与匹配元素的规则一起层叠，片段伪元素为特异性计算添加伪类的特异性。这是否也需要在层叠模块中指定？

<!DOCTYPE HTML>
<style>
    .bouncy-columns {
    continue: fragments;
    width: 6em;
    height: 10em;
    float: left;
    margin: 1em;
    font: medium/1.25 Times New
        Roman, Times, serif;
    }
    .bouncy-columns::nth-fragment(1) {
    background: aqua; color: black;
    transform: rotate(-3deg);
    }
    .bouncy-columns::nth-fragment(2) {
    background: yellow; color: black;
    transform: rotate(3deg);
    }
</style>
<div class="bouncy-columns">
    ...
</div>

在这个
例子中，div
中的文本
被分解成
一系列的
列。作者
可能

希望文本
填充两
列。但是
如果它碰巧
填充了三
列，第三
列仍然会
被创建。它

只是没有
任何
片段特定的
样式，因为
作者
没有给它
任何样式。

使用 continue 属性对 ::nth-fragment() 伪元素进行样式设置确实有效；如果片段框的 continue 计算值不是 fragments，则该片段框是最后一个片段。但是，覆盖第一个片段上的 continue 并不会导致片段框不存在；是否存在片段框完全由元素的 overflow 计算值决定。

使用 content 属性对 ::nth-fragment() 伪元素进行样式设置无效；片段框的 content 计算值与元素的 content 计算值保持相同。

为片段框指定 display: none 会导致具有该索引的片段框不被生成。但是，就用于匹配后续片段框的 ::nth-fragment() 伪元素的索引而言，它仍然算作已生成。但是，由于它未生成，因此不包含任何内容。

允许指定 display、 position 或 float 的其他值，但不允许更改内部显示类型。（因为 continue 仅适用于块容器、弹性容器和网格容器）。需要明确说明这是如何工作的

为了匹配其他伪元素的模型，其中伪元素存在于其相应元素的内部， ::nth-fragment() 伪元素中的声明会覆盖没有伪元素的规则中的声明。此类声明中的相对优先级由正常的层叠顺序确定（参见 [CSS2]）。

在 ::nth-fragment() 伪元素上指定的样式确实会影响到片段框内内容的继承。换句话说，片段框内的内容必须从片段框的样式（即伪元素样式）继承，而不是直接从元素继承。这意味着在片段框之间拆分的元素可能对元素的不同部分具有不同的样式。

此继承规则允许间接指定样式（通过使用显式的 inherit 或在不适用于 ::first-letter 的属性上使用默认继承）而这些样式无法直接指定（基于下一节中的规则）。这是一个问题。适用于片段内部样式的限制也应适用于从片段继承。

<!DOCTYPE HTML>
<style>
    .article {
    continue: fragments;
    }
    .article::nth-fragment(1) {
    font-size: 1.5em;
    margin-bottom: 1em;
    height: 4em;
    }
    .article::nth-fragment(2) {
    margin-left: 5em;
    margin-right: 2em;
    }
</style>
<div class="article">
    <code>font-size</code>> 属性...
</div>

在片段上指定的 font-size 属性
会继承到片段的

后代中。
这意味着
继承的属性可以可靠地
用于片段，如此示例所示。

片段内部样式

这应该仅适用于 continue:fragments，还是也适用于 continue:paginate？

::nth-fragment() 伪元素也可以用于设置片段框内部内容的样式。与 ::first-line 和 ::first-letter 伪元素不同， ::nth-fragment() 伪元素可以应用于选择器中除主题以外的部分：特别是，它可以匹配主题的祖先。但是，通过此类选择器的规则应用的唯一 CSS 属性是那些适用于 ::first-letter 伪元素的属性。

更准确地说，当规则的选择器具有附加到选择器中除主题以外部分的 ::nth-fragment() 伪元素时，该规则中的声明在以下情况下适用于片段（或其伪元素）：

声明适用于 ::first-letter 伪元素的属性，
如果移除了那些 ::nth-fragment() 伪元素，并且每个简单选择器序列与其匹配的元素之间存在特定关联，则声明将适用于该片段（或其伪元素），并且
对于每个移除的 ::nth-fragment() 伪元素，该片段存在于与该关联中与伪元素附加到的选择器相关联的元素的片段框内，并且其索引与伪元素匹配。

<!DOCTYPE HTML>
<style>
    .dark-columns {
    continue: fragments;
    width: 6em;
    height: 10em;
    float: left;
    margin-right: 1em;
    font: medium/1.25 Times New
        Roman, Times, serif;
    }
    .dark-columns::nth-fragment(1) {
    background: aqua; color: black;
    }
    .dark-columns::nth-fragment(1) :link {
    color: blue;
    }
    .dark-columns::nth-fragment(1) :visited {
    color: purple;
    }
    .dark-columns::nth-fragment(2) {
    background: navy; color: white;
    }
    .dark-columns::nth-fragment(2) :link {
    color: aqua;
    }
    .dark-columns::nth-fragment(2) :visited {
    color: fuchsia;
    }
</style>
<div class="dark-columns">
    ...
</div>

在这个
例子中，文本
从一个
浅色
片段流入
另一个
深色

片段。因此
我们希望
不同片段中的
超链接
具有
不同的样式。

附录 C：隐私注意事项

本规范未引入新的隐私注意事项。

附录 D：安全注意事项

本规范未引入新的安全注意事项。

自 Level 4 以来的变更

待定

致谢

特别感谢来自 Rossen Atanassov、 Bert Bos、 Tantek Çelik、 John Daggett、 fantasai、 Daniel Glazman、 Vincent Hardy、 Håkon Wium Lie、 Peter Linss、 Robert O’Callahan、 Florian Rivoal、 Alan Stearns、 Steve Zilles 以及 www-style 社区所有其他成员的反馈。

一致性

文档约定

一致性要求通过描述性断言和 RFC 2119 术语的组合来表达。本文档规范部分的关键词“MUST”、“MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、“RECOMMENDED”、“MAY”和“OPTIONAL”应按照 RFC 2119 中的描述进行解释。但是，为了便于阅读，这些词在本规范中并非全部大写。

本规范的所有文本均为规范性文本，明确标记为非规范性的章节、示例和注释除外。[RFC2119]

本规范中的示例以“例如”一词开头，或使用 class="example" 与规范性文本分开，如下所示：

信息性注释以“注意”一词开头，并使用 class="note" 与规范性文本分开，如下所示：

建议是规范性章节，其样式旨在引起特别注意，并使用 <strong class="advisement"> 与其他规范性文本分开，如下所示： 用户代理必须提供可访问的替代方案。

一致性类别

如果样式表中使用本模块中定义的语法的所有语句都根据通用 CSS 语法和本模块中定义的每个特性的各个语法有效，则该样式表符合本规范。

如果渲染器除了按照相应规范的定义解释样式表外，还通过正确解析并相应地渲染文档来支持本规范定义的所有特性，则该渲染器符合本规范。但是，由于设备限制导致用户代理无法正确渲染文档并不会使该用户代理不符合规范。（例如，不要求用户代理在单色监视器上渲染颜色。）

如果创作工具编写的样式表在语法上根据通用 CSS 语法和本模块中每个特性的各个语法是正确的，并且满足本模块中描述的样式表的所有其他一致性要求，则该创作工具符合本规范。

部分实现

为了使作者能够利用向前兼容的解析规则来分配回退值，CSS 渲染器必须将任何它们没有可用支持级别的 at-rules、属性、属性值、关键字和其他语法结构视为无效（并酌情忽略）。特别是，用户代理不得在单个多值属性声明中选择性地忽略不受支持的组件值并接受受支持的值：如果任何值被视为无效（不受支持的值必须如此），CSS 要求忽略整个声明。

不稳定和专有特性的实现

非实验性实现

一旦规范达到候选推荐阶段，就可以进行非实验性实现，并且实现者应该发布他们可以证明已根据规范正确实现的任何 CR 级别特性的无前缀实现。

为了建立和维护 CSS 在不同实现之间的互操作性，CSS 工作组要求非实验性 CSS 渲染器在发布任何 CSS 特性的无前缀实现之前，向 W3C 提交一份实现报告（以及必要时，用于该实现报告的测试用例）。提交给 W3C 的测试用例将由 CSS 工作组进行审查和更正。

CSS 溢出模块 第 5 级

摘要

本文档的状态