CSS 层叠与继承第 4 级

W3C 候选推荐标准快照

关于此文档的更多细节
此版本
https://w3org.cn/TR/2022/CR-css-cascade-4-20220113/
最新发布版本
https://w3org.cn/TR/css-cascade-4/
编辑草案
https://drafts.csswg.org/css-cascade-4/
历史版本
历史
https://w3org.cn/standards/history/css-cascade-4
实现报告
https://wpt.fyi/results/css/css-cascade
反馈
CSS 工作组问题仓库
编辑
Elika J. Etemad / fantasai (特邀专家)
Tab Atkins Jr. (Google)
建议编辑此规范
GitHub 编辑器

摘要

本 CSS 模块描述了如何整理样式规则并为所有元素上的所有属性赋值。通过层叠(cascading)和继承(inheritance),值可以在所有元素的所有属性上进行传播。

本层级的新增内容包括 revert 关键字,以及用于 @import 规则的 <supports-condition>

CSS 是一种用于描述结构化文档(如 HTML 和 XML)在屏幕、纸张等介质上渲染方式的语言。

关于本文档

本部分描述了本文档在发布时的状态。当前 W3C 出版物列表及本技术报告的最新版本可在 W3C 技术报告索引(https://w3org.cn/TR/)中找到。

本文档由 CSS 工作组推荐标准轨道发布为候选推荐标准快照。作为候选推荐标准发布并不意味着得到了 W3C 及其成员的背书。候选推荐标准快照已经过广泛审阅,旨在收集实施经验,并已获得工作组成员关于免版税许可的实施承诺。本文档旨在成为 W3C 推荐标准;它将作为候选推荐标准至少持续至 以收集额外反馈。

请通过在 GitHub 上提交议题(推荐方式)发送反馈,并在标题中包含规范代码“css-cascade”,例如:“[css-cascade] …评论摘要…”。所有议题和评论均已存档。或者,也可以将反馈发送至(已存档的)公共邮件列表 www-style@w3.org

本文档受 2021 年 11 月 2 日版 W3C 流程文档管辖。

本文档由在 W3C 专利政策下运作的团体编写。W3C 维护着一份与该团体交付成果相关的专利披露公开列表;该页面还包含了披露专利的指南。任何对个人认为包含必要权利要求 (Essential Claim(s)) 的专利具有实际知情权的个人,必须根据 W3C 专利政策第 6 节披露相关信息。

1. 简介

CSS 定义了一组有限的参数,称为属性(properties),用于指导文档的渲染。每个属性都有一个名称(例如 colorfont-sizeborder-style)、一个值空间(例如 <color><length-percentage>[ solid | dashed | dotted | … ])以及定义的渲染行为。属性值通过属性声明分配给文档的各个部分,这些声明为相关的元素或框赋予属性值(例如 red12ptdotted)。

CSS 的基本设计原则之一是层叠(cascading),它允许多个样式表影响文档的呈现。当不同的声明尝试为相同的元素/属性组合设置值时,必须以某种方式解决冲突。

当没有声明试图为“元素/属性”组合设置值时,会出现相反的问题。在这种情况下,将通过继承或查看属性的初始值来寻找该值。

级联默认化过程以一组声明作为输入,并为每个元素的每个属性输出一个指定值

本规范描述了为文档中所有元素上的所有属性查找指定值的规则。页面上下文及其边距框中的指定值查找规则描述于 [css-page-3] 中。

1.1. 模块交互

本节是规范性的。

本模块替换并扩展了 [CSS2] 第 6 章中定义的分配属性值、层叠和继承的规则。

其他 CSS 模块可能会扩展此处定义的某些语法和功能。例如,媒体查询第 4 级规范在与本模块结合时,扩展了本规范中使用的 <media-query> 值类型的定义。

就本规范而言,文本节点被视为其关联元素的元素子节点,并拥有全套属性;由于它们不能被选择器定位,其所有计算值均通过默认化分配。

2. 导入样式表:@import 规则

@import 规则允许用户从其他样式表导入样式规则。如果 @import 规则指向一个有效的样式表,用户代理必须将该样式表的内容视为如同直接书写在 @import 规则的位置一样,但有两个例外。

例如,来自导入样式表的样式规则中的声明与级联的交互,就如同它们字面书写在 @import 所在位置的样式表中一样。

任何 @import 规则必须位于样式表中所有其他有效 @规则和样式规则之前(忽略 @charset),否则该 @import 规则无效。@import 的语法如下:

@import [ <url> | <string> ]
        [ supports( [ <supports-condition> | <declaration> ] ) ]?
        <media-query-list>? ;

其中 <url><string> 提供要导入的样式表的 URL,而可选的 [<supports-condition>|<declaration>] 和 <media-query-list>(统称为导入条件)说明了其适用的条件。

以下条件 @import 规则仅在 UA 支持 display: flex 时加载样式表,并仅将其应用于掌上设备视口最大宽度为 400px 的场景。
@import url("narrow.css") supports(display: flex) handheld and (max-width: 400px);

如果提供了 <string>,则必须将其解释为具有相同值的 <url>

下面各行含义相同,并说明了两种 @import 语法(一种带有 url(),另一种带有裸字符串):
@import "mystyle.css";
@import url("mystyle.css");

2.1. 条件 @import 规则

导入条件允许导入依赖于媒体或特性支持。在没有任何导入条件的情况下,导入是无条件的。(为 <media-query-list> 指定 all 具有相同的效果。)如果导入条件不匹配,则导入样式表中的规则不适用,就像导入的样式表被包含在具有给定条件的 @media 和/或 @supports 块中一样。

以下规则说明了如何使 @import 规则依赖于媒体:
@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import url("narrow.css") handheld and (max-width: 400px);

因此,只要导入条件不匹配,用户代理就可以避免获取条件导入。此外,如果 <supports-condition> 阻止了导入样式表的应用,UA *不得* 获取该样式表(除非它是通过其他链接加载的),并且 *必须* 为导入规则的 CSSImportRule.styleSheet 值返回 null(即使它是通过其他链接加载的)。

以下规则说明了作者如何在不影响较新用户代理的网络性能的情况下,为旧版用户代理提供回退规则:
@import url("fallback-layout.css") supports(not (display: flex));
@supports (display: flex) {
  ...
}

导入条件<media-query-list>(作为媒体查询列表解析和解释)和 <supports-condition>(作为支持查询解析和解释)给出。如果提供了 <declaration> 来代替 <supports-condition>,则必须将其解释为 <supports-decl>(即暗示了额外的括号),并作为 <supports-condition> 处理。

例如,以下两行是等效的:
@import "mystyle.css" supports(display: flex);
@import "mystyle.css" supports((display: flex));

导入条件的评估和完整语法由 媒体查询 (Media Queries) [MEDIAQ]CSS 条件规则 (CSS Conditional Rules) [CSS-CONDITIONAL-3] 规范定义。

2.2. 处理样式表导入

当同一个样式表在多个地方被导入或链接到文档时,用户代理必须处理(或表现得好像处理了)每个链接,就像该链接指向一个独立的样式表一样。

注:这不对资源获取提出任何要求,仅涉及样式表如何在 CSSOM 中反映以及在本规范等规范中如何使用。假设缓存得当,UA 只获取一次样式表是完全合适的,即使它被多次链接或导入。

导入样式表的级联源是导入它的样式表的级联源

导入样式表的环境编码是导入它的样式表的编码。[css-syntax-3]

获取一个 @import,给定一个 @import 规则 rule
  1. parentStylesheetrule父 CSS 样式表[CSSOM]

  2. 如果 rule<supports-condition>,且该条件不为真,则返回。

  3. parsedUrlURL 解析器处理 rule 的 URL 和 parentStylesheet位置后的结果。如果算法返回错误,则返回。[CSSOM]

  4. parsedUrl 获取样式资源,样式表为 parentStylesheet,目标为 "style",CORS 模式为 "no-cors",且 processResponse 为以下步骤,给定 响应 response 以及字节流(null 或失败)byteStream

    1. 如果 maybeByteStream 不是字节流,则返回。

    2. 如果 parentStylesheet 处于怪异模式 (quirks mode)responseCORS 同源,令 content type"text/css"。否则,令 content typeresponse 的 Content Type 元数据。

    3. 如果 content type 不是 "text/css",则返回。

    4. importedStylesheet解析 byteStream(给定 parsedUrl)后的结果。

    5. importedStylesheet来源清洁标志 (origin-clean flag) 设置为 parentStylesheet来源清洁标志

    6. 如果 response 不是 CORS 同源,取消设置 importedStylesheet来源清洁标志

    7. rulestyleSheet 设置为 importedStylesheet

2.3. CSS 样式表的 Content-Type

导入样式表的处理取决于所链接资源的实际类型。

如果链接资源的类型为 text/css,则必须将其解释为 CSS 样式表。否则,必须将其解释为网络错误。

3. 简写属性

某些属性是简写属性,意味着它们允许作者通过单个属性指定多个属性的值。简写属性设置其所有的长写子属性,就像原地展开一样。

当简写形式中省略了值时,除非另有定义,否则每个“缺失的”子属性都会被分配其初始值

这意味着简写属性声明总是设置其所有子属性,即使是那些未明确设置的属性。使用不当可能会导致无意中重置某些子属性。使用得当的话,简写可以通过重置从其他来源无意中层叠的子属性来保证“从零开始”。

例如,编写 background: green 而不是 background-color: green 可确保背景颜色覆盖任何先前可能已将背景设置为具有 background-image 的图像的声明。

例如,CSS Level 1 的 font 属性是一个简写(shorthand)属性,用于一次性设置 font-stylefont-variantfont-weightfont-sizeline-heightfont-family。此示例中的多重声明:
h1 {
  font-weight: bold;
  font-size: 12pt;
  line-height: 14pt;
  font-family: Helvetica;
  font-variant: normal;
  font-style: normal;
}

因此可以重写为

h1 { font: bold 12pt/14pt Helvetica }

随着更多 font 子属性引入到 CSS 中,简写声明也会将它们重置为初始值。

在某些情况下,简写可能具有不同的语法或特殊关键字,这些语法或关键字不直接对应其子属性的值。(在这种情况下,简写将明确定义其值的展开。)

在其他情况下,属性可能是简写属性的一个仅重置子属性:与其他子属性一样,当未指定时,它会被简写属性重置为初始值,但简写属性可能不包含将该子属性设置为其任何其他值的语法。例如,border 简写属性会将 border-image 重置为其初始值 none,但没有语法将其设置为其他任何值。[css-backgrounds-3]

如果简写属性被指定为某个CSS 全局关键字 [css-values-3],它会将所有子属性设置为该关键字,包括任何仅重置子属性。(请注意,这些关键字不能在单个声明中与其他值组合,即便是简写属性也不行。)

简写属性声明为 !important 等同于将该简写的所有子属性声明为 !important

3.1. 属性别名

属性在得到一段时间的支持后有时会更改名称,例如厂商前缀属性被标准化。出于兼容性原因,仍需支持原始名称,但新名称更受青睐。为实现这一点,CSS 定义了两种将旧语法“别名化”为新语法的不同方式。

遗留名称别名
当旧属性的值语法与新属性的语法完全一致时,这两个名称会通过一种类似于大小写映射的操作进行别名处理:在解析时,旧属性被转换为新属性。这种转换也适用于 CSSOM,无论是对于字符串参数还是属性访问器:对旧属性名称的请求会透明地转发给新属性名称。
例如,如果 old-namenew-name遗留名称别名getComputedStyle(el).oldName 将返回 newName 属性的计算样式,而 el.style.setPropertyValue("old-name", "value") 会将 new-name 属性设置为 "value"
遗留简写
当旧属性的语法与新属性不同时,这两个名称会使用简写机制进行别名处理。这些简写被定义为遗留简写,且不建议使用。它们的行为与常规简写完全相同,只是在序列化声明时 CSSOM 不会使用它们。[CSSOM]
例如,page-break-* 属性是 break-* 属性的遗留简写(参见 CSS Fragmentation 3 § 3.4 分页别名:page-break-before, page-break-after 和 page-break-inside 属性)。

page-break-before: always 设置为 break-before: page 会在解析时展开,就像其他简写一样。同样,如果设置了 break-before: page,调用 getComputedStyle(el).pageBreakBefore 将返回 "always"。然而,在序列化样式块时(参见 CSSOM 1 § 6.7.2 序列化 CSS 值),page-break-before 属性永远不会被选为序列化的简写,无论指定的是它还是 break-before;相反,总是会选择 break-before

3.2. 重置所有属性:all 属性

名称all
initial | inherit | unset | revert
初始值 见各个属性
应用于 见各个属性
可继承 见各个属性
百分比 见各个属性
计算值 见各个属性
动画类型 见各个属性
规范顺序 按语法

all 属性是一个简写,用于重置所有 CSS 属性,除了 directionunicode-bidi。它仅接受CSS 全局关键字。它不会重置自定义属性 [css-variables-1]

注:例外的 CSS 属性 directionunicode-bidi 实际上是标记级功能,不应在作者的样式表中设置。(它们仅作为 CSS 属性存在,用于样式化 UA 不支持的文档语言。)作者应改用适当的标记,例如 HTML 的 dir 属性。[css-writing-modes-3]

例如,如果作者在某个元素上指定了 all: initial,它将阻止所有继承并重置所有属性,就好像级联的作者、用户或用户代理级别中没有任何规则出现一样。

这对于页面中包含的“组件”根元素很有用,该组件不希望继承外部页面的样式。然而请注意,应用于该元素的任何“默认”样式(例如 UA 样式表中块级元素如 <div> 上的 display: block)也会被清除。

4. 值处理

一旦用户代理解析了文档并构建了文档树,它必须为扁平树中的每个元素(以及格式化结构中的每个框)分配一个值,该值对应于目标媒体类型适用的每个属性。

给定元素或盒子的 CSS 属性的最终值是多步计算的结果:

  1. 首先,为每个元素上的每个属性收集应用于该元素的所有声明值。应用于该元素的声明值可能有零个或多个。
  2. 层叠产生层叠值。每个元素上的每个属性最多有一个层叠值
  3. 默认设定产生指定值。每个元素上的每个属性恰好有一个指定值
  4. 解决值依赖关系产生计算值。每个元素上的每个属性恰好有一个计算值
  5. 格式化文档产生使用值。仅当给定属性适用于该元素时,该元素才具有该属性的使用值
  6. 最后,使用值根据显示环境的约束转换为实际值。与使用值一样,元素上的给定属性可能存在也可能不存在实际值

连接或不属于文档扁平元素树的元素不参与 CSS 值处理,也没有声明值级联值指定值计算值使用值实际值,即使它们可能被分配了样式声明(例如通过 style 属性)。

4.1. 声明值

每个应用于元素的属性声明都会贡献一个与元素关联的声明值(declared value)。有关详细信息,请参阅过滤声明

这些值随后由层叠处理,以选择单个“获胜值”。

4.1.1. 值别名

某些属性值具有遗留值别名(legacy value aliases):在解析时,遗留语法被转换为新语法,导致产生的声明值与解析输入的语法不同。这些别名通常用于处理遗留兼容性要求,例如将厂商前缀值转换为其标准等价物。

4.2. 层叠值

级联值(cascaded value)代表级联的结果:它是胜出级联(在级联输出中排序第一)的声明值。如果级联输出为空列表,则没有级联值

4.3. 指定值

指定值(specified value)是样式表作者为该元素预期的给定属性的值。它是将级联值通过默认化过程得出的结果,保证每个元素上的每个属性都有一个指定值

在许多情况下,指定值就是级联值。但是,如果根本没有级联值,则指定值默认值。当CSS 全局关键字作为属性的级联值时会进行特殊处理,根据该关键字设置指定值,详见 § 7.3 显式默认化

4.4. 计算值

计算值(computed value)是将指定值按照属性定义表中“计算值”一行定义的规则解析后的结果,通常在准备继承时将其绝对化。

注意:计算值是在继承期间从父级传输到子级的值。由于历史原因,它不一定是 getComputedStyle() 函数返回的值,该函数有时返回使用值[CSSOM] 此外,计算值是一种抽象数据表示:它们的定义反映了数据表示,而非该数据的序列化方式。例如,序列化规则通常允许省略解析时隐含的某些值;但这些值仍然是计算值的一部分。

指定值可以是绝对的(即不相对于另一个值,如 red2mm)或相对的(即相对于另一个值,如 auto2em)。计算相对值通常将其绝对化:

参见下表中的示例 (f)、(g) 和 (h)。

注意:通常情况下,计算值会尽可能解析指定值,而无需对文档进行布局或执行其他昂贵或难以并行化的操作,例如解析网络请求或检索除元素及其父元素以外的值。

即使属性不适用,计算值依然存在。然而,某些属性可能会根据该属性是否适用于元素来改变其确定计算值的方式。

4.5. 使用值

使用值(used value)是将计算值完成任何剩余计算后得出的绝对理论值,用于文档的格式化。

例如,声明 width: auto 在不知道元素祖先布局的情况下无法解析为长度,因此其计算值auto,而其使用值是一个绝对长度,例如 100px[CSS2]

另一个例子是,<div> 的计算 break-before 值可能为 auto,但通过其第一个子元素的传播,获取了 break-before 的使用值 page[css-break-3]

如果某个属性不适用于此元素或框类型,则该属性没有使用值

例如,flex 属性在非弹性项目(flex items)的元素上没有使用值

4.5.1. 适用属性

如果某个属性不适用于(apply to)特定元素或框类型——正如其“适用于”一行所注明的那样——这意味着它不会直接作用于该类型的框或元素。

注意:一个不适用的属性仍然可能具有间接格式化效果,如果其计算值影响了其他适用的属性计算;当然,其计算值(总是存在)仍然可以继承给后代并对它们产生作用。

尽管 writing-modetext-orientation 不适用于表格行(它们不影响表格行及其子元素的布局方式),但在这些框上设置它们仍会影响字体相关单位(如 ch)的计算,从而可能影响任何采用 <length> 的属性。
在 HTML p 元素(默认为 display: block)上设置 text-transform 是有效果的,即使 text-transform 仅适用于行内框,因为该属性会继承到段落的匿名根行内框并应用于其中包含的文本。

注意:定义为适用于“所有元素”的属性适用于所有元素和显示类型,但不一定适用于所有伪元素类型,因为伪元素通常有其特定的渲染模型或其他限制。然而,::before::after 伪元素被定义为像普通元素一样生成框,因此被定义为接受所有适用于“所有元素”的属性。有关伪元素的更多信息,请参阅 [CSS-PSEUDO-4]

4.6. 实际值

使用值原则上已准备好使用,但用户代理可能无法在给定环境中利用该值。例如,用户代理可能只能以整数像素宽度渲染边框,因此必须近似使用宽度。此外,元素的字体大小可能需要根据字体的可用性或 font-size-adjust 属性的值进行调整。实际值(actual value)是在做出任何此类调整之后的使用值。

注:通过探测元素的实际值,可以了解文档是如何布局的。然而,并非所有信息都记录在实际值中。例如,page-break-after 属性的实际值并不反映元素之后是否有分页符。类似地,orphans 的实际值并不反映特定元素中有多少孤行。参见下表中的示例 (j) 和 (k)。

4.7. 示例

CSS 值计算示例
属性获胜声明层叠值指定值计算值使用值实际值
(a)text-align text-align: left left left left left left
(b)border-top-width, border-right-width, border-bottom-width, border-left-widthborder-width: inherit inherit 4.2px 4.2px 4.2px 4px
(c)width (none) (none) auto (初始值)auto 120px 120px
(d)list-style-position list-style-position: inherit inherit inside (内侧) inside (内侧) inside (内侧) inside (内侧)
(e)list-style-position list-style-position: initial 初始值 outside (初始值)outside (外侧) outside (外侧) outside (外侧)
(f)font-size font-size: 1.2em 1.2em 1.2em 14.1px 14.1px 14px
(g)width width: 80% 80% 80% 80% 354.2px 354px
(h)width width: auto auto auto auto 134px 134px
(i)height height: auto auto auto auto 176px 176px
(j)page-break-after (none) (none) auto (初始值)auto auto auto
(k)orphans (孀行) orphans: 3 3 3 3 3 3

5. 过滤

为了找到声明值,实现必须首先识别应用于每个元素的所有声明。如果以下情况成立,则声明适用于元素:

对于每个元素上的每个属性,适用的声明值构成了声明值列表。下一节“级联”将对这些列表进行优先级排序。

6. 层叠

级联(cascade)接收给定元素上给定属性的无序声明值列表,按声明的优先级(由下述规则确定)进行排序,并输出单个级联值

6.1. 层叠排序顺序

层叠根据以下标准对声明进行排序,优先级由高到低:

来源和重要性
声明的来源基于其来源,其重要性在于是否用 !important 声明(见下文)。各种来源的优先级,按降序排列:
  1. 过渡声明 [css-transitions-1]
  2. 重要用户代理声明
  3. 重要用户声明
  4. 重要作者声明
  5. 动画声明 [css-animations-1]
  6. 普通 作者声明
  7. 普通 用户声明
  8. 普通 用户代理声明

此列表中排在前面的 来源 的声明优于排在后面的 来源 的声明。

上下文
文档语言可以支持混合来自不同封装上下文(encapsulation contexts)的声明,例如 [DOM]影子树(shadow trees)的嵌套树上下文

当比较两个来自不同封装上下文的声明时,对于普通(normal)规则,来自外部上下文的声明获胜;对于重要(important)规则,来自内部上下文的声明获胜。为此,[DOM] 树上下文被视为以包含影子的树顺序进行嵌套。

注意:这实际上意味着属于某个封装上下文普通声明可以设置默认值,这些默认值很容易被外部上下文覆盖,而属于封装上下文重要声明则可以强制要求,使其无法被外部上下文覆盖。

特殊性
选择器模块 [SELECT] 描述了如何计算选择器的特指度(specificity)。每个声明具有与其所在样式规则相同的特指度。就此步骤而言,不属于样式规则的声明(例如样式属性的内容)被认为具有比任何选择器都高的特指度。具有最高特指度的声明获胜。
出现顺序
文档顺序中的最后一个声明胜出。为此
  • 来自导入样式表的声明排序,就如同其样式表被替换到 @import 规则的位置一样。
  • 由原始文档独立链接的样式表中的声明,被视为按链接顺序串联,具体顺序由宿主文档语言确定。
  • 来自 style 属性的声明按照出现该 style 属性的元素的文档顺序排列,并且全部置于所有样式表之后。

级联输出是每个元素上每个属性的一个(可能为空的)声明值排序列表。

6.2. 级联来源

每个样式规则都有一个级联源(cascade origin),它决定了它进入级联的位置。CSS 定义了三个核心

作者来源
作者根据文档语言的约定为源文档指定样式表。例如,在 HTML 中,样式表可以包含在文档中或外部链接。
用户来源
用户可能能够为特定文档指定样式信息。例如,用户可以指定一个包含样式表的文件,或者用户代理可能提供一个生成用户样式表(或表现得好像它生成了一个)的界面。
用户代理来源
符合标准的用户代理必须应用一个默认样式表(或表现得好像它应用了一个)。用户代理的默认样式表应该以满足文档语言一般表现预期的方式来呈现文档语言的元素(例如,对于视觉浏览器,HTML 中的 EM 元素使用斜体字体呈现)。参见例如 HTML 用户代理样式表[HTML]

CSS 的扩展定义了以下额外的

动画源 (Animation Origin)
CSS 动画 [css-animations-1] 在运行时生成表示其效果的“虚拟”规则。
过渡来源
与 CSS 动画一样,CSS 过渡 [css-transitions-1] 在运行时生成表示其效果的“虚拟”规则。

6.3. 重要声明:!important 注解

CSS 试图在作者和用户的样式表之间创建一种权力平衡。默认情况下,作者样式表中的规则会覆盖用户样式表中的规则,而用户样式表中的规则又会覆盖用户代理默认样式表中的规则。为了平衡这一点,声明可以被标记为重要(important),这会增加其在级联中的权重并颠倒优先顺序。

如果声明具有 [css-syntax-3] 定义的 !important 注解,则该声明为重要,即如果其值中的最后两个(非空白、非注释)标记是分隔符标记 ! 后跟标识符标记 important。所有其他声明均为普通(normal)(非重要)。

[hidden] { display: none !important; }

重要声明优先于普通声明。作者和用户样式表都可以包含重要声明,其中用户源重要声明会覆盖作者源重要声明。这一 CSS 特性通过让有特殊需求的用户(大字体、特定颜色组合等)控制表现,提高了文档的可访问性。

来自所有源的重要声明优先于动画。这允许作者在重要情况下覆盖动画值。(动画值通常覆盖所有其他规则。)[css-animations-1]

用户代理样式表也可能包含重要声明。这些会覆盖所有作者用户声明。

以下示例中用户样式表的第一条规则包含一个 !important 声明,它覆盖了作者样式表中对应的声明。第二条规则中的声明也会获胜,因为它被标记为 !important。然而,用户样式表中的第三条声明不是 !important,因此会输给作者样式表中的第二条规则(该规则恰好设置了一个简写属性)。此外,第三条作者规则会输给第二条作者规则,因为第二个声明是 !important。这表明 !important 声明在作者样式表内部也有其功能。
/* From the user’s style sheet */
p { text-indent: 1em !important }
p { font-style: italic !important }
p { font-size: 18pt }

/* From the author’s style sheet */
p { text-indent: 1.5em !important }
p { font: normal 12pt sans-serif !important }
p { font-size: 24pt }
属性胜出的值
text-indent 1em
font-style italic
font-size 12pt
font-family sans-serif

6.4. 非 CSS 表现性提示的优先级

UA 可以选择尊重源文档标记中的表现性提示,例如 [HTML] 中的 bgcolor 属性或 s 元素。所有基于文档语言的样式必须转换为相应的 CSS 规则,并作为 UA 源或位于常规用户源作者源之间的专用作者表现性提示源(author presentational hint origin)进入级联。就级联而言,此作者表现性提示源被视为一个独立的,但就 revert 关键字而言,它被视为作者源的一部分。

文档语言可以定义此类表现性提示是作为 UA 源还是作者源进入级联;如果是这样,UA 必须相应处理。例如,[SVG11] 将其表现属性映射到作者源中。

注意:作为 UA 源规则进入级联的表现性提示可以被作者源用户源样式覆盖。作为作者表现性提示源规则进入级联的表现性提示可以被作者源样式覆盖,但不能被非重要用户源样式覆盖。宿主语言在考虑这些因素时,应为表现性提示选择适当的源。

7. 默认值

级联未产生值时,必须以其他方式查找指定值继承属性通过继承从父元素提取默认值;所有其他属性采用其初始值。作者可以通过 inheritinitial 关键字显式请求继承或初始化。

7.1. 初始值

每个属性都有一个定义在属性定义表中的初始值。如果该属性不是继承属性,且级联未产生值,则该属性的指定值就是其初始值

7.2. 继承

继承(Inheritance)将属性值从父元素传播给其子元素。元素上属性的继承值(inherited value)是该元素父元素上该属性的计算值。对于没有父元素的根元素,继承值是该属性的初始值

对于带有影子的 [DOM] 树,继承操作于扁平元素树之上。这意味着插入的元素从它们分配到的 slot 继承,而不是直接从其浅树(light tree)父级继承。伪元素根据为每个伪元素描述的虚构标签序列进行继承。[CSS-PSEUDO-4]

某些属性是继承属性,如其属性定义表中所定义。这意味着,除非级联产生了一个值,否则其值将由继承决定。

属性也可以显式继承。参见 inherit 关键字。

注意: 继承遵循文档树,不会被 匿名框 拦截,也不会受到框树操作的影响。

7.3. 显式默认值

以下定义了几个 CSS 全局属性值;声明属性具有这些值可以显式指定特定的默认行为。正如 CSS 值与单位 (CSS Values and Units) [css-values-3] 中所指定,所有 CSS 属性都可以接受这些值。

7.3.1. 重置属性:initial 关键字

如果属性的级联值initial 关键字,则该属性的指定值就是其初始值

7.3.2. 显式继承:inherit 关键字

如果属性的级联值inherit 关键字,则该属性的指定值计算值均为继承值

7.3.3. 清除所有声明:unset 关键字

如果属性的级联值unset 关键字,那么如果它是继承属性,则处理为 inherit,如果不是,则处理为 initial。此关键字有效地擦除了级联中较早出现的所有声明值,并根据属性(或简写属性的所有长手属性)的属性适当进行继承或不继承。

7.3.4. 回滚级联源:revert 关键字

如果属性的级联值revert 关键字,其行为取决于声明所属的级联源

用户代理原点
等同于 unset
用户来源
级联值回滚到用户代理级别,从而使指定值的计算就像该属性在此元素上未指定任何作者源用户源规则一样。
作者来源
级联值回滚到用户级别,从而使指定值的计算就像该属性在此元素上未指定任何作者源规则一样。就 revert 而言,此源包括动画

8. 变更记录

8.1. 自 2021 年 10 月 15 日工作草案以来的变更

2021 年 10 月 15 日工作草案以来的主要变更:

8.2. 自 2018 年 8 月 28 日候选推荐标准以来的变更

2021 年 3 月 19 日工作草案以来的主要变更包括:

2020 年 8 月 18 日工作草案以来的主要变更包括:

2018 年 8 月 28 日候选推荐标准以来的主要变更包括:

8.3. 自 2016 年 1 月 14 日候选推荐标准以来的变更

2016 年 1 月 14 日工作草案以来的主要变更包括:

可查阅意见处理说明(Disposition of Comments)

8.4. 自 2015 年 4 月 21 日工作草案以来的变更

2015 年 4 月 21 日工作草案以来的变更包括:

8.5. 自 Level 3 以来的新增内容

Level 3 以来添加了以下功能

8.6. 自 Level 2 以来的新增内容

Level 2 以来添加了以下功能

致谢

David Baron, Tantek Çelik, Simon Sapin, Noam Rosenthal 和 Boris Zbarsky 对本规范做出了贡献。

隐私与安全考虑

一致性

文档约定

一致性要求通过描述性断言和 RFC 2119 术语相结合来表达。本文档规范性部分中的关键词“MUST”(必须)、“MUST NOT”(不得)、“REQUIRED”(必需)、“SHALL”(应)、“SHALL NOT”(不应)、“SHOULD”(推荐)、“SHOULD NOT”(不推荐)、“RECOMMENDED”(建议)、“MAY”(可以)和“OPTIONAL”(可选)应按照 RFC 2119 中的描述进行解释。然而,为了可读性,这些词在本文档中不以全大写形式出现。

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

本规范中的示例均以“例如”一词引入,或者通过 class="example" 与规范性文本隔开,如下所示

这是一个说明性示例。

说明性注释以“Note”一词开头,并使用 class="note" 与规范性文本隔开,如下所示

注意,这是一个说明性注释。

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

一致性类别

本规范为三类一致性定义了一致性要求。

样式表
一份 CSS 样式表
渲染器
一种 用户代理 (UA),它解释样式表的语义并渲染使用它们的文档。
创作工具
一种 用户代理 (UA),用于编写样式表。

如果样式表包含的所有使用本模块定义语法的语句,根据通用 CSS 语法及本模块定义的各功能语法均有效,则该样式表符合本规范。

如果渲染器除了按相应规范解释样式表外,还通过正确解析本规范定义的所有功能并相应地渲染文档来支持这些功能,则该渲染器符合本规范。然而,由于设备限制导致 UA 无法正确渲染文档,并不意味着该 UA 不符合规范。(例如,UA 无需在单色显示器上渲染颜色。)

如果创作工具编写的样式表根据通用 CSS 语法及本模块中各功能的语法是句法正确的,并符合本模块中描述的所有其他样式表一致性要求,则该创作工具符合本规范。

部分实现

为了使作者能够利用前向兼容的解析规则来指定后备值,CSS 渲染器 **必须** 将其无法使用支持级别的任何 @规则、属性、属性值、关键字和其他语法结构视为无效(并 适当忽略)。特别地,用户代理 **不得** 在单一多值属性声明中选择性地忽略不支持的组件值而保留支持的值:如果任何值被视为无效(因为不支持的值必须如此),CSS 要求忽略整个声明。

不稳定和专有特性的实现

为了避免与未来稳定的 CSS 功能发生冲突,CSS 工作组建议在实施不稳定功能和私有扩展遵循最佳实践

非实验性实现

一旦规范达到候选推荐阶段,非实验性实现即可成为可能,实现者应发布他们能够证明根据规范正确实现的任何 CR 级别特性的无前缀实现。

为建立并保持 CSS 在不同实现间的互操作性,CSS 工作组请求非实验性的 CSS 渲染器在发布任何 CSS 功能的无前缀实现之前,向 W3C 提交一份实现报告(并在必要时提交用于该实现报告的测试用例)。提交给 W3C 的测试用例需经 CSS 工作组审阅和修正。

有关提交测试用例和实现报告的详细信息,请访问 CSS 工作组网站 https://w3org.cn/Style/CSS/Test/。问题可发送至 public-css-testsuite@w3.org 邮件列表。

候选推荐标准 (CR) 退出标准

为了使本规范能够推进到提案推荐标准 (PR),必须至少有两个独立的、可互操作的每个功能的实现。每个功能可以由不同组的产品实现,不要求所有功能都由单个产品实现。为了实现此标准,我们定义以下术语

independent
每个实现必须由不同的方开发,并且不能共享、重用或派生自另一个合格实现所使用的代码。对本规范实现无影响的代码段不受此要求限制。
可互操作
通过官方 CSS 测试套件中的相应测试用例,或者如果实现不是 Web 浏览器,则通过等效测试。如果此类用户代理 (UA) 用于声明互操作性,则测试套件中的每个相关测试都应创建等效测试。此外,如果此类 UA 用于声明互操作性,则必须有一个或多个额外的 UA,它们也可以以相同的方式通过这些等效测试,以实现互操作性的目的。等效测试必须公开,以供同行评审。
实现
用户代理,即
  1. 实现了该规范。
  2. 对公众可用。该实现可以是出货产品或其他公开可用的版本(即测试版、预览发布版或“每日构建版”)。非出货产品发布版必须已实现该功能至少一个月,以证明其稳定性。
  3. 不是实验性的(即,专门为通过测试套件设计且不打算用于正常使用的版本)。

该规范将保持候选推荐标准状态至少六个月。

索引

本规范定义的术语

通过引用定义的术语

引用

规范性引用

[CSS-2021]
Tab Atkins Jr.; Elika Etemad; Florian Rivoal. CSS Snapshot 2021. 2021 年 12 月 31 日. NOTE. URL: https://w3org.cn/TR/css-2021/
[CSS-ANIMATIONS-1]
Dean Jackson; et al. CSS 动画 Level 1. 2018 年 10 月 11 日. WD. URL: https://w3org.cn/TR/css-animations-1/
[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 2021年7月26日. CR. URL: https://w3org.cn/TR/css-backgrounds-3/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley; Lea Verou. CSS 颜色模块 Level 4. 2021 年 12 月 15 日. WD. URL: https://w3org.cn/TR/css-color-4/
[CSS-CONDITIONAL-3]
David Baron; Elika Etemad; Chris Lilley. CSS Conditional Rules Module Level 3. 2021年12月23日. CR. URL: https://w3org.cn/TR/css-conditional-3/
[CSS-CONDITIONAL-5]
David Baron; Elika Etemad; Chris Lilley. CSS Conditional Rules Module Level 5. 2021 年 12 月 21 日. WD. URL: https://w3org.cn/TR/css-conditional-5/
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. 2021年9月3日. CR. URL: https://w3org.cn/TR/css-display-3/
[CSS-FONTS-5]
Myles Maxfield; Chris Lilley. CSS 字体模块 Level 5. 2021 年 12 月 21 日. WD. URL: https://w3org.cn/TR/css-fonts-5/
[CSS-PSEUDO-4]
Daniel Glazman; Elika Etemad; Alan Stearns. CSS Pseudo-Elements Module Level 4. 2020年12月31日. WD. URL: https://w3org.cn/TR/css-pseudo-4/
[CSS-SCOPING-1]
Tab Atkins Jr.; Elika Etemad. CSS Scoping Module Level 1. 2014年4月3日. WD. URL: https://w3org.cn/TR/css-scoping-1/
[CSS-SYNTAX-3]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. 2021年12月24日. CR. URL: https://w3org.cn/TR/css-syntax-3/
[CSS-TRANSITIONS-1]
David Baron; et al. CSS Transitions. 2018年10月11日. WD. URL: https://w3org.cn/TR/css-transitions-1/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS 值与单位模块 Level 3. 2019 年 6 月 6 日. CR. URL: https://w3org.cn/TR/css-values-3/
[CSS-VALUES-4]
Tab Atkins Jr.; Elika Etemad. CSS 值与单位模块 Level 4. 2021 年 12 月 16 日. WD. URL: https://w3org.cn/TR/css-values-4/
[CSS-VARIABLES-1]
Tab Atkins Jr.. CSS 层叠变量自定义属性模块 Level 1. 2021 年 11 月 11 日. CR. URL: https://w3org.cn/TR/css-variables-1/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 2019年12月10日. REC. URL: https://w3org.cn/TR/css-writing-modes-3/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 2011年6月7日. REC. URL: https://w3org.cn/TR/CSS21/
[CSSOM]
Daniel Glazman; Emilio Cobos Álvarez. CSS Object Model (CSSOM). 2021年8月26日. WD. URL: https://w3org.cn/TR/cssom-1/
[DOM]
Anne van Kesteren. DOM 标准. Living Standard. URL: https://dom.spec.whatwg.org/
[FETCH]
Anne van Kesteren. 提取标准 (Fetch Standard). 生活标准. URL: https://fetch.spec.whatwg.org/
[HTML]
Anne van Kesteren; et al. HTML 标准. Living Standard. URL: https://html.whatwg.cn/multipage/
[MEDIAQ]
Florian Rivoal; Tab Atkins Jr.. Media Queries Level 4. 2021年12月25日. CR. URL: https://w3org.cn/TR/mediaqueries-4/
[RFC2119]
S. Bradner. RFC 中用于指示要求级别的关键词. 1997年3月. Best Current Practice. URL: https://datatracker.ietf.org/doc/html/rfc2119
[SELECT]
Tantek Çelik; et al. 选择器第 3 级. 2018 年 11 月 6 日. REC. URL: https://w3org.cn/TR/selectors-3/
[SELECTORS-4]
Elika Etemad; Tab Atkins Jr.. 选择器 Level 4. 2018 年 11 月 21 日. WD. URL: https://w3org.cn/TR/selectors-4/
[URL]
Anne van Kesteren. URL 标准. 生活标准. URL: https://url.spec.whatwg.org/

参考资料

[CSS-ALIGN-3]
Elika Etemad; Tab Atkins Jr.. CSS Box Alignment Module Level 3. 2021年12月24日. WD. URL: https://w3org.cn/TR/css-align-3/
[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 2018年12月4日. CR. URL: https://w3org.cn/TR/css-break-3/
[CSS-BREAK-4]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 4. 2018年12月18日. WD. URL: https://w3org.cn/TR/css-break-4/
[CSS-FLEXBOX-1]
Tab Atkins Jr.; et al. CSS Flexible Box Layout Module Level 1. 2018年11月19日. CR. URL: https://w3org.cn/TR/css-flexbox-1/
[CSS-FONTS-4]
John Daggett; Myles Maxfield; Chris Lilley. CSS 字体模块第 4 级. 2021 年 12 月 21 日. WD. URL: https://w3org.cn/TR/css-fonts-4/
[CSS-INLINE-3]
Dave Cramer; Elika Etemad; Steve Zilles. CSS Inline Layout Module Level 3. 2020年8月27日. WD. URL: https://w3org.cn/TR/css-inline-3/
[CSS-LISTS-3]
Elika Etemad; Tab Atkins Jr.. CSS Lists and Counters Module Level 3. 2020年11月17日. WD. URL: https://w3org.cn/TR/css-lists-3/
[CSS-PAGE-3]
Elika Etemad; Simon Sapin. CSS 分页媒体模块 Level 3. 2018 年 10 月 18 日. WD. URL: https://w3org.cn/TR/css-page-3/
[CSS-SIZING-3]
Tab Atkins Jr.; Elika Etemad. CSS Box Sizing Module Level 3. 2021年12月17日. WD. URL: https://w3org.cn/TR/css-sizing-3/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii; Florian Rivoal. CSS Text Module Level 3. 2021年4月22日. CR. URL: https://w3org.cn/TR/css-text-3/
[CSS-WRITING-MODES-4]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 4. 2019年7月30日. CR. URL: https://w3org.cn/TR/css-writing-modes-4/
[SVG11]
Erik Dahlström; et al. 可缩放矢量图形 (SVG) 1.1 (第二版). 2011 年 8 月 16 日. REC. URL: https://w3org.cn/TR/SVG11/

属性索引

名称初始值应用于继承百分比动画类型 (Animation type)规范顺序计算值
all initial | inherit | unset | revert见各个属性见各个属性见各个属性见各个属性见各个属性按语法见各个属性