CSS属性值定义语法该怎么理解？

Question

CSS属性值定义语法该怎么理解？

以下面这段定义为例：

linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> )

我的理解:

• 关键字: to
• 数据类型: <angle> 、<side-or-corner> 、<color-stop-list>
• 符号:
  • 字面符号：,
  • 组合符号： （并列，普通空格字符，表示各部分必须出现，同时需要按顺序出现）,|（互斥，各部分恰好出现一次）[] (优先级越来越大)
  • 数量符号：?（可以出现零次或者一次，也就是该元素可有可无）

字面符号按照其字面的意义呈现，组合符号的优先级低于数量符号的优先级。

问题：

1. 上面的定义中空格出现了不止一次，这些空格都表示并列符号吗？
2. 这个语法树该怎么画？

Answer 1

linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop-list> )

先说 | ，这个是或的意思

然后是 [] ，这个是可选项的意思，[]?即可选项后边有限制，有或者没有，不能有多个

<angle> 是渐变色角度定义

<side-or-conrner> 是渐变色方向定义

<color-stop-list> 是一个颜色列表，过渡色集合