我遇到了一个具有以下值的 CSS background 属性：
background: none repeat scroll 0% 0% #F8F8F8;
background属性的语法在此 MDN 页面给出，如下所示：
Formal syntax: [ <bg-layer> , ]* <final-bg-layer>
where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
and <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <background-color>
background属性值的顺序是否重要？而且，更一般地说：如何解释MDN上提供的这种"形式语法"。
正式语法记录在 MDN 站点本身。对于Stack Overflow来说，您遇到的"更一般"的问题可能过于宽泛：只需浏览文档，如果您有任何具体问题，请返回。
您遇到的一个这样的具体问题是background属性的值顺序是否重要。背景的大部分部分（特别是bg层）由"双条"分隔，根据MDN（的形式语法），不需要特定的顺序。引用双杠的具体文档：
双酒吧
用双杠 || 分隔两个或多个组件意味着所有实体都是选项：其中至少有一个必须存在，并且可以按任意顺序显示。通常，这用于定义速记属性的不同值。
作为脚注，虽然我一直喜欢并使用 MDN，但可能更权威的来源是 W3.org，例如，您可以在其中找到背景速记语法以及 CSS 值和单位模块级别 3 中的语法解释。它基本上说了同样的话，例如关于"双杠"：
双条形 （||） 分隔两个或多个选项：其中一个或多个必须按任意顺序出现。
这在实践中适用于 background 属性，如您在此代码片段中看到的那样，无论属性解析的顺序如何，都相同：
#a { background: 100% / 2% url('https://i.stack.imgur.com/RvUr4.png') red repeat-x; }
#b { background: red repeat-x url('https://i.stack.imgur.com/RvUr4.png') 100% / 2%; }<div id="a">A</div>
<br />
<div id="b">B</div>顺序无关紧要。但是，秩序确实很重要。
博士;
顺序并不重要，它就是这样，在MDN的文档中，并且也得到了W3C规范的证实。我将逐字重复这一部分：
双杆（
||）分隔两个或多个选项：其中一个或多个 必须以任何顺序发生。
但不要妄下结论！
秩序确实很重要。让我们以background速记语法为例：
[ <bg-layer> , ]* <final-bg-layer>
where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
and <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <background-color>
而且，由于它列出了多个背景的所有可能属性的语法，因此让我们通过选择一个背景来降低复杂性。它看起来像这样：
<bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <background-color>
在代码片段中解决这个问题，并与你的问题和其他答案中提到的文档相关联，你可能会认为所有这些由双杠（||）分隔的属性都可以省略，并且可以以任何顺序出现。对吧？
错。
虽然 MDN 是一个很好的参考，但它并不完整，有时会省略重要的细节。在这种特殊情况下，这两个引用...
- MDN 参考在这里： https://developer.mozilla.org/en-US/docs/Web/CSS/background
- W3C 参考在这里： http://www.w3.org/TR/css3-background/#the-background
。陈述相同的语法并解释所有属性，但省略一个细节。
现在仔细看看名为box的属性。有两个box属性由双条（||）分隔。这应该意味着您可以省略box或按任何顺序指定box。但是，这并不完全正确。虽然您当然可以从速记中完全省略box，但您不能将它们按您希望的任何顺序排列而不会得到意想不到的结果。这在上面链接的 MDN 参考background中没有说明。
但是，在同一个MDN的另一个关于background-clip的参考中：
- MDN 参考： https://developer.mozilla.org/en-US/docs/Web/CSS/background-clip
它指出：
规范顺序：由形式语法定义的唯一非歧义顺序
这意味着，顺序受属性的歧义控制。如果属性不明确，则顺序或省略无关紧要。如果属性不明确，则顺序和/或省略确实很重要。
在您的background速记示例中，两个box属性（如果存在）被解释为第一个是background-origin，第二个是background-clip。
如果您在此处阅读其他文档来源：
- 歌剧开发参考： https://dev.opera.com/articles/css3-borders-backgrounds-boxes/
它指出：
使用新背景时需要注意一些事项 速记。如果只指定了一个框值，则同时指定背景剪辑和 背景原点设置为此值。如果指定了两个，则 第一个用于原点，第二个用于剪辑。
- W3c 参考在这里： http://www.w3.org/TR/css3-background/#the-background-origin
声明如下：
请注意，如果"背景剪辑"是"填充框"，"背景原点" 是"边框框"，"背景位置"是"左上角"（首字母 值），并且元素具有非零边框，然后是顶部和左侧 的背景图像将被剪裁。
因此，如果省略其中一个值，它将被解释为 background-origin 和 background-clip .但是，如果您同时提供这两个值，那么顺序很重要，否则你会得到奇怪的结果。不仅如此，行为还受到background-position的另一个属性的影响。
在下面的代码片段中使用此示例可以轻松演示这一点。在第一个div中，背景图像位于距填充 15px 的位置，但继续跨越边框。请注意，第一个box值是padding-box，第二个值是border-box。在第二div中，背景图像的位置距离边框 15px，但在填充结束的位置停止。请注意，此处的第一个值是 border-box，第二个值是 padding-box 。在第三div，背景图像从边界开始并继续跨越边界。在这种情况下，省略一个值，background-origin和background-clip都得到border-box的值。
片段：
div { width: 120px; height: 120px; display: inline-block; }
#r {
border: 15px #f00;
border-style: dotted dashed dashed dotted;
background: url(http://placehold.it/150) no-repeat 15px 15px padding-box border-box;
}
#g {
border: 15px #0f0;
border-style: dotted dashed dashed dotted;
background: url(http://placehold.it/150) no-repeat 15px 15px border-box padding-box;
}
#b {
border: 15px #00f;
border-style: dotted dashed dashed dotted;
background: url(http://placehold.it/150) no-repeat 15px 15px border-box ;
}<div id="r">Red</div>
<div id="g">Green</div>
<div id="b">Blue</div>底线：
最好参考文档。但是，最好咨询多个来源。这个答案指的是5个来源。阅读 W3C 规范，但不仅仅是在一个地方，阅读所有相关属性引用，以了解一个属性如何受到其他属性值甚至顺序的影响。并且不要忘记尝试样品，您可能永远不会知道惊喜可能等着您！
.