值定义语法

CSS 值定义语法，一种形式语法，用于定义 CSS 属性或函数的一组有效值。除了此语法之外，有效值集还可以通过语义约束进一步限制（例如，数字必须严格为正）。

定义语法描述了哪些值是允许的以及它们之间的交互。一个组件可以是关键字、一些被视为字面量的字符，或者给定 CSS 数据类型或另一个 CSS 属性的值。

组件值类型

关键字

通用关键字

具有预定义含义的关键字会按字面出现，无需使用引号。例如：auto、smaller 或 ease-in。

inherit、initial 和 unset 的特殊情况

所有 CSS 属性都接受关键字 inherit、initial 和 unset。它们不会显示在值定义中，而是隐式定义的。

字面量

在 CSS 中，一些字符可以单独出现，例如斜杠（'/'）或逗号（','），并在属性定义中用于分隔其各个部分。逗号通常用于分隔枚举中的值，或类似数学函数中的参数；斜杠通常分隔语义上不同的值部分，但具有共同的语法。通常，斜杠用于简写属性；用于分隔相同类型但属于不同属性的组件。

这两个符号都按字面出现在值定义中。

数据类型

基本数据类型

某些数据类型贯穿整个 CSS，并为规范中的所有值定义一次。称为基本数据类型，它们由其名称以及符号'<'和'>'包围：<angle>、<string>、…

非终结符数据类型

不太常见的数据类型，称为非终结符数据类型，也由'<'和'>'包围。

非终结符数据类型有两种

  • 与属性同名的数据类型，放在引号之间。在这种情况下，数据类型与属性共享相同的赋值。它们通常用于简写属性的定义。
  • 数据类型不共享相同的属性名称。这些数据类型非常接近基本数据类型。它们仅在定义的物理位置上与基本数据类型有所不同。在这种情况下，定义通常在物理上非常靠近使用它们的属性的定义。

组件值组合符

括号

括号将多个实体、组合符和乘数括起来，然后将其转换为单个组件。它们用于将组件分组以绕过优先级规则。

css
bold [ thin && <length> ]

此示例匹配以下值

  • bold thin 2vh
  • bold 0 thin
  • bold thin 3.5em

但不是

  • thin bold 3em，因为bold与括号定义的组件并置，它必须出现在它之前。

并置

将多个关键字、字面量或数据类型彼此相邻放置，仅用一个或多个空格分隔，称为并置。所有并置的组件都是必须的，并且应该按确切的顺序出现。

css
bold <length>, thin

此示例匹配以下值

  • bold 1em, thin
  • bold 0, thin
  • bold 2.5cm, thin
  • bold 3vh, thin

但不是

  • thin 1em, bold，因为实体必须按指定的顺序排列
  • bold 1em thin，因为实体是必须的；逗号，一个字面量，必须存在
  • bold 0.5ms, thin，因为ms值不是<length>

双与号

用双与号&&分隔两个或多个组件，表示所有这些实体都是必须的，但可以按任何顺序出现。

css
bold && <length>

此示例匹配以下值

  • bold 1em
  • bold 0
  • 2.5cm bold
  • 3vh bold

但不是

  • bold，因为这两个组件都必须出现在值中。
  • bold 1em bold，因为这两个组件都只能出现一次。

注意：并置优先于双与号，这意味着bold thin && <length>等价于[ bold thin ] && <length>。它描述了bold thin <length>或<length> bold thin，但不是bold <length> thin。

双竖线

用双竖线||分隔两个或多个组件，表示所有实体都是可选的：至少必须存在一个，并且它们可以按任何顺序出现。通常，这用于定义简写属性的不同值。

css
<'border-width'> || <'border-style'> || <'border-color'>

此示例匹配以下值

  • 1em solid blue
  • blue 1em
  • solid 1px yellow

但不是

  • blue yellow，因为一个组件最多只能出现一次。
  • bold，因为它不是任何实体的值允许的关键字。

注意：双与号优先于双竖线，这意味着bold || thin && <length>等价于bold || [ thin && <length> ]。它描述了bold、thin <length>、bold thin <length>或thin <length> bold，但不是<length> bold thin，因为如果bold不省略，则必须放在整个thin && <length>组件之前或之后。

单竖线

用单竖线|分隔两个或多个实体，表示所有实体都是互斥选项：这些选项中只有一个必须存在。这通常用于分隔可能的关键字列表。

css
<percentage> | <length> | left | center | right | top | bottom

此示例匹配以下值

  • 3%
  • 0
  • 3.5em
  • left
  • center
  • right
  • top
  • bottom

但不是

  • center 3%，因为组件中只有一个必须存在。
  • 3em 4.5em，因为组件最多只能存在一次。

注意：双竖线优先于单竖线，这意味着bold | thin || <length>等价于bold | [ thin || <length> ]。它描述了bold、thin、<length>、<length> thin或thin <length>，但不是bold <length>，因为|组合符两侧的每个实体只能存在一个。

组件值乘数

乘数是一个符号，指示前面实体可以重复多少次。如果没有乘数，则实体必须出现恰好一次。

乘数不能相加，并且优先于所有组合符。

星号 (*)

星号乘数表示实体可以出现零次、一次或多次。

css
bold smaller*

此示例匹配以下值

  • bold
  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller，等等。

但不是

  • smaller，因为bold是并置的，并且必须出现在任何smaller关键字之前。

加号 (+)

加号乘数表示实体可以出现一次或多次。

css
bold smaller+

此示例匹配以下值

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller，等等。

但不是

  • bold，因为smaller必须至少出现一次。
  • smaller，因为bold是并置的，并且必须出现在任何smaller关键字之前。

问号 (?)

问号乘数表示实体是可选的，并且必须出现零次或一次。

css
bold smaller?

此示例匹配以下值

  • bold
  • bold smaller

但不是

  • bold smaller smaller，因为smaller最多只能出现一次。
  • smaller，因为bold是并置的，并且必须出现在任何smaller关键字之前。

花括号 ({ })

花括号乘数，包含用逗号分隔的两个整数 A 和 B，表示实体必须至少出现 A 次，最多出现 B 次。

css
bold smaller{1,3}

此示例匹配以下值

  • bold smaller
  • bold smaller smaller
  • bold smaller smaller smaller

但不是

  • bold，因为smaller必须至少出现一次。
  • bold smaller smaller smaller smaller，因为smaller最多只能出现三次。
  • smaller，因为bold是并置的，并且必须出现在任何smaller关键字之前

井号 (#)

井号乘数表示实体可以重复一次或多次（例如，加号乘数），但每次出现都用逗号 (',') 分隔。

css
bold smaller#

此示例匹配以下值

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller，等等。

但不是

  • bold，因为smaller必须至少出现一次。
  • bold smaller smaller smaller，因为smaller的不同出现必须用逗号分隔。
  • smaller，因为bold是并置的，并且必须出现在任何smaller关键字之前。

井号之后可以选择跟随花括号，以指示实体重复多少次。

css
bold smaller#{1,3}

此示例匹配以下值

  • bold smaller
  • bold smaller, smaller
  • bold smaller, smaller, smaller

但不是

  • bold smaller, smaller, smaller, smaller，因为smaller最多只能出现三次。
css
bold smaller#{2}

此示例匹配以下值

  • bold smaller, smaller

但不是

  • bold smaller，因为smaller必须出现恰好两次。

感叹号 (!)

组后面的感叹号乘数表示该组是必需的，并且必须产生至少一个值；即使组内项目的语法否则允许整个内容被省略，也必须至少有一个组件值不能被省略。

css
[ bold? smaller? ]!

此示例匹配以下值

  • bold
  • smaller
  • bold smaller

但不是

  • 既不是bold也不是smaller，因为它们中必须至少出现一个。
  • smaller bold，因为bold是并置的，并且必须出现在smaller关键字之前。
  • bold smaller bold，因为bold和smaller只能出现一次。

方括号范围表示法 ([min,max])

某些类型可以在特定范围内接受数值。例如，column-count属性可以接受一个介于正1和无穷大（包括）之间的整数。相应的语法如下所示

<integer [1,∞]>

任何超出此指定范围的值都会导致整个声明无效，因此浏览器将忽略它。

带括号的范围表示法[min, max]表示min和max值之间的包含范围。此表示法用于数值类型表示法，可以包含单位，例如<angle [0,180deg]>。正无穷大和负无穷大（-∞ 和 ∞）不得指定单位。以单位指定的类型可以指定带或不带单位的零值，例如<time [0s,10s]>或<time [0,10s]>。

以下是一些其他示例

  • <integer [-∞,∞]>：从负无穷大到正无穷大的任何整数。
  • <integer [0,∞]>：从 0 到正无穷大的任何整数都是有效的。负整数无效。
  • <time [0s,10s]>或<time [0,10s]>：从 0 到 10 秒的任何持续时间都是有效的。
  • <integer [-∞,-1]> | <integer [1,∞]>：除零以外的任何整数都是有效的。

总结

符号 名称 描述 示例
组合符
并置 组件是必须的，并且应该按该顺序出现 solid <length>
&& 双与号 组件是必须的，但可以按任何顺序出现 <length> && <string>
|| 双竖线 至少必须存在一个组件，并且它们可以按任何顺序出现。 <'border-image-outset'> || <'border-image-slice'>
| 单竖线 组件中只有一个必须存在 smaller | small | normal | big | bigger
[ ] 括号 将组件分组以绕过优先级规则 bold [ thin && <length> ]
乘数
无乘数 恰好 1 次 solid
* 星号 0 次或多次 bold smaller*
+ 加号 1 次或多次 bold smaller+
? 问号 0 次或 1 次（即可选） bold smaller?
{min,max} 花括号 至少min次，最多max次 bold smaller{1,3}
# 井号 1 次或多次，每次出现都用逗号 (',') 分隔 bold smaller#
! 感叹号 组必须产生至少 1 个值 [ bold? smaller? ]!
范围
[min,max] 数值带括号范围 指定数值范围 <integer [0,∞]>

规范

规范
CSS 值和单位模块级别 4
# value-defs

另请参阅